微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

类似这样的效果

<view class=\'helpCateList\'>
  <!-- 类别 -->
  <scroll-view class=\'scroll-view\' scroll-x=\"true\">
   <view class=\"item-content\" wx:key=\"id\" wx:for=\"{{helpCateList}}\" wx:for-item=\"item\">
    <view class=\"content {{currentTab == item.itemsId ? \'active\' : \'\'}}\" data-itemsId=\'{{item.itemsId}}\' bindtap=\'cateChange\' >{{item.itemsName}} </view>
   </view>
  </scroll-view>
 </view>

.helpDisList .content{
 position: relative;
 width: 710rpx;
 border-radius: 5rpx;

}
.active{ //当点击的时候添加这个样式
 /* border-bottom: 4rpx solid rgb(252, 186, 7); */
 color:rgb(252, 186, 7);
}

Page({
 data:{

  helpCateList:[ //数据从后台请求回来赋值
   // { id: \"1\", desc: \"康复医疗\" },
   // { id: \"2\", desc: \"教育\" },
   // { id: \"3\", desc: \"就业\" },
   // { id: \"4\", desc: \"扶贫\" },
   // { id: \"5\", desc: \"职业培训\" },
   // { id: \"6\", desc: \"社会保障\" },
   // { id: \"7\", desc: \"文化生活\" },
  ],
  currentTab: 1,
 },
 cateChange(e) {
  console.log(e)
  let that = this
  that.setData({

   currentTab: e.currentTarget.dataset.itemsid, //这个必须要

  })
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。