微信小程序实现标签页面切换功能

效果图如下所示：

页面结构

scroll-view scroll-x=' true ' class=' IP _ tab _ com tainer ' view class=' IP _ tab _ com tainer _ padd '/view block wx : for=' { { IPS } } ' wx : for-item=' IP ' wx : key=' { { IP。id } } '视图类=' { { IP。选择吗？IP _ tab _ item _ s ' : ' IP _ tab _ item _ n ' } ' bind tap=' onIpItemClick ' wx : key=' { { IP。id } } '数据项=' { { IP } } ' { { IP。标题} }/视图/块视图类=' IP _ tab _ com tainer _ padd '/视图/滚动-视图类='内容{内容} }/视图页面样式表。IP _ tab _ com容器{宽度： 100%；背景色-颜色： # F5F5padding: 20rpx 0空白： nowrap}.IP _ tab _ com tainer _ padd { display : inline-block；宽度： 24 rpx}.IP _ tab _ item _ s { display : inline-block；线高： 40 rpxpadd : 12 rpx 32 rpx color : # 91 daf 9右边距： 8 rpx左边距left : 8rpx font-size : 28 rpx；飞越：隐藏；背景-color : # ffffff；border: 1px固体# 91daf9}。IP _ tab _ item _ n { display : inline-block；padding: 12rpx 32rpx线高： 40 rpx颜色： # 353535右边距： 8 rpx背景-color : # ffffff；左边距left : 8rpx font-size : 28 rpx；文本对齐：中心；飞越：隐藏；文本-飞越：省略号；边界半径： 4rpxborder: 1px固体# CCCCCC；}/**去除横向滚动条*/:-web工具包-滚动条{ width : 0；高度： 0;颜色：透明；}.内容{宽度： 100%；}js

//页数/水平-scroll _ tab/水平-scroll_tab.jsPage({ /** *页面的初始数据*/data : { IPS : [{ id : ' 1 '，title: '日统计，isSelect:true，{ id: '2 '，title: '月统计，isSelect: false}，{ id: '3 '，title: '年统计，isSelect: false}，]，content: '全部' }, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ },/** *项点击事件*/onIpItemClick:函数（事件){ console.log(事件);var id=事件。当前目标。数据集。项目。id；var curIndex=0；for(var I=0；我喜欢这个。数据。IPS。长度；i ) { if (id==this.data.ips[i].id) { this.data.ips[i].is select=TrueCurindex=I；} else { this.data.ips[i].isSelect=false} }这是。setdata({ content : this。数据。IPS[Curindex]).title，ips: this.data.ips，})；},})总结

以上所述是小编给大家介绍的微信小程序实现标签页面切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！