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

关注

原创最新推荐文章于 2026-07-06 16:16:55 发布 729 阅读 AI 写同款· GEO 优化 ›

微信小程序开发之底部导航栏和自定义底部导航栏 一、底部导航栏 第一步，打开app.json，在pages属性中添加底部tab页 "pages":[ "pages/index/index", "pages/user/user" ] 第二步，添加tabBar属性进行配置 "tabBar": { "color": "#000000", //tab 上的文字默认颜色，仅支持十六进制颜色 "selectedColor": "#00BFFF", //tab 上的文字选中时的颜色，仅支持十六进制颜色 "back 阅读详情

小程序导航栏选中效果

如果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>

 //性别切换
  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
          })
        }
      }
    })
  },