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


            效果图如下所示：



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页面切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！