微信小程序如何编写点击顶部导航栏切换样式的长尾关键词代码？

本文共计405个文字，预计阅读时间需要2分钟。

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式的代码实例。文中通过具体示例代码，简洁地展示了如何实现这一功能，对学习者和工作者具有一定的参考价值。需要的伙伴可以参考学习。

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

类似这样的效果

<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, //这个必须要 }) },

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