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

效果图如下所示：wxml<scroll-viewscroll-x="true"class="ip_tab_comtainer"><viewclass="ip_tab_comtainer_pa

效果图如下所示：

wxml

<scroll-view scroll-x="true" class="ip_tab_comtainer">
 <view class="ip_tab_comtainer_padd"></view>
 <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
 <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">
 {{ip.title}}
 </view>
 </block>
 <view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
{{content}}
</view>

wxss

.ip_tab_comtainer {
 width: 100%;
 background-color: #F5F5F5;
 padding: 20rpx 0 0;
 white-space: nowrap;
}
.ip_tab_comtainer_padd {
 display: inline-block;
 width: 24rpx;
}
.ip_tab_item_s {
 display: inline-block;
 line-height: 40rpx;
 padding: 12rpx 32rpx;
 color: #91daf9;
 margin-right: 8rpx;
 margin-left: 8rpx;
 font-size: 28rpx;
 overflow: hidden;
 background-color: #ffffff;
 border: 1px solid #91daf9;
}
.ip_tab_item_n {
 display: inline-block;
 padding: 12rpx 32rpx;
 line-height: 40rpx;
 color: #353535;
 margin-right: 8rpx;
 background-color: #ffffff;
 margin-left: 8rpx;
 font-size: 28rpx;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 border-radius: 4rpx;
 border: 1px solid #CCCCCC;
}
/**
去除横向滚动条
*/
::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}
.content{
 width: 100%;
}

js

// pages/horizontal-scroll_tab/horizontal-scroll_tab.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 ips: [
 { id: "1", title: "日统计", isSelect:true },
 { id: "2", title: "月统计", isSelect: false},
 { id: "3", title: "年统计", isSelect: false},
 ],
 content:"全部"
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 },
 /**
 * item点击事件
 */
 onIpItemClick: function (event) {
 console.log(event);
 var id = event.currentTarget.dataset.item.id;
 var curIndex = 0;
 for (var i = 0; i < this.data.ips.length; i++) {
 if (id == this.data.ips[i].id) {
 this.data.ips[i].isSelect = true;
 curIndex = i;
 } else {
 this.data.ips[i].isSelect = false;
 }
 }
 this.setData({
 content: this.data.ips[curIndex].title,
 ips: this.data.ips,
 });
 },
})

总结

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

微信小程序tab页面切换 微信小程序 微信小程序tab 切换