⼩程序导航栏选中效果、底部弹框选择⼩程序导航栏选中效果
如果xctype=1就⽤title_active这个class的样式，否则就⽤warp_title
<view class="{{xctype==1?'title_active':'warp_title'}}" bindtap="warpTitle" data-index="1">标题⼀</view>
<view class="{{xctype==2?'title_active':'warp_title'}}" bindtap="warpTitle" data-index="2">标题⼆</view>
js代码：
warpTitle:function(e){/点击事件
let that = this;
var index=e.currentTarget.dataset.index;//获取data-index的值（判断点击的是哪个）
that.setData({//赋值
xctype:e.currentTarget.dataset.index,//*赋值 xctype 看到是1还是2
pageIndex:0,
pageCount:0,
resultList:[],//点击之后清空原来的数据
JumpEntry:e.currentTarget.dataset.index,//录⼊
});
}
底部弹框选择
html
<view class="item">
<label class="des">性别</label>
<block wx:if="{{model.sex==0}}">
<label class="val" bindtap="sexChange">男</label>
</block>
<block wx:else>
<label class="val" bindtap="sexChange">⼥</label>
</block>
<image src="ccacdn.cancanan/xiaochengxu/icon_right_arrow.png" class="arrow"></image> </view>
js
//性别切换
sexChange:function(e){
let that=this;
wx.showActionSheet({
itemList:["男","⼥"],
success:function(res){
if(res.tapIndex==0){
that.setData({
["model.sex"]:0
})
}
else{
that.setData({
["model.sex"]:1
js导航栏下拉菜单})
}
}
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。