小程序导航栏选中效果、底部弹框选择

小程序导航栏选中效果

如果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,//录入
       });
       that.getInspectResultRecord();//重新调事件，获取数据
    }

底部弹框选择

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="http://ccacdn.cancanan.cn/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
          })
        }
      }
    })
  },