微信小程序开发 — 顶部导航栏

最新推荐文章于 2024-06-19 14:51:59 发布

我的蔚蓝天空

最新推荐文章于 2024-06-19 14:51:59 发布

阅读量478

点赞数

文章标签：微信小程序 webview 小程序

本文链接：https://blog.csdn.net/weixin_45115446/article/details/125087021

版权

直接看代码吧，第一部分是wxml部分

<view class='nav'>
  <text class='{{curNum==index?"cur":""}}' data-navindex="{{index}}" wx:for="{{nav}}" wx:key=" " bindtap='tabnav'>{{item}}</text>
</view>

<!--已处理页面-->
<view wx:if="{{curNum==0}}">
  <button>ASD</button>
</view>
<!--未处理页面-->
<view wx:if="{{curNum==1}}">
  <button>A\DSD</button>
</view>

接下来的wxss部分

/*导航栏开*/
.nav{
  display: flex;
  height: 90rpx;
  background: #fff;
}
.nav text{
  /* 等分 */
  flex: 1;
  text-align: center;
  line-height: 90rpx;
  height: 90rpx;
}
/* 被选中的样式 */
.nav text.cur{
  color: hsl(226, 66%, 45%);
  border-bottom: 4rpx solid  hsl(244, 72%, 33%);
}
/*导航栏完*/

接下来的js部分

data: {
    nav:["已处理","未处理"],
    curNum: 0,
  },
  tabnav: function (ev) {
    let index = ev.currentTarget.dataset.navindex
    this.setData({
      curNum: index
    })
  },

思路就是点击不同的字，然后修改对应的值，显示对应的页面。