首页 > 编程语言> 文章详细

微信小程序的动态样式绑定，实现顶部导航菜单

2021-01-24 13:03:05 阅读：267 来源： 互联网

标签：菜单 bar name 微信绑定 course menu id

由于业务需要，在小程序中需要实现类似选项卡的顶部导航菜单，效果图如下所示：

1.在js文件的data里面构造数据

将需要的菜单放入数组对象中，方便以后扩展，增加了菜单的灵活性，设置变量记录当前所选的菜单的id，由于应用了数组的下标做判断，菜单的id需要从0开始

2.在页面上渲染列表

首先循环列表绑定点击事件，将菜单id作为参数传入，根据当前的下标和当前所选的菜单id，做三元运算判断，显示不同的样式

3.在js文件中定义点击事件

接收页面传过来的当前所选择的菜单id，赋值给data里面的hasindex

4.详细代码如下

4.1 course.wxml 文件

<!-- 主体内容 -->
<view class="container">
    <!-- 菜单 -->
    <view class="flexs menu">
        <view class="active_t" wx:for="{{menuList}}" wx:key="index" bindtap="selectCurr" data-id="{{item.id}}">
            <view class="menu-item {{index == hasindex ? 'select-item' : 'dis-select-item'}}">{{item.name}}</view>
            <view class="menu-bar {{index == hasindex ? 'menu-bar-show' : 'menu-bar-hide'}}"></view>
        </view>
    </view>
</view>

4.2 course.js 文件

Page({
  //页面的初始数据
  data: {
    hasindex:0, //当前选择菜单的id
    menuList:[  //菜单列表
      {id:0,name:'所有课程'},
      {id:1,name:'学习中'},
      {id:2,name:'未读课程'}
    ]
  },

  // 选择菜单
  selectCurr(e){
    this.setData({hasindex:e.currentTarget.dataset.id});
  },

})

4.3 course.wxss 文件

.container {
  padding: 50rpx;
  box-sizing: border-box;
} 
.flexs{
  display: flex;
  justify-content:space-between;
}

/* 顶部菜单 */
.menu{
  width: 90%;
  font-size: 28rpx;
  font-weight: bold;
}
.select-item{
  color:#00A8F5;
}
.dis-select-item{
  color: rgba(0, 0, 0, 0.5);
}
.menu-bar{
  width: 100%;
  height: 6rpx;
  margin-top:10rpx;
  background:#00A8F5;
}
.menu-bar-show{
  display: block;
}
.menu-bar-hide{
  display: none;
}

标签：菜单,bar,name,微信,绑定,course,menu,id
来源： https://www.cnblogs.com/wxhcode/p/14319712.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序的动态样式绑定，实现顶部导航菜单