快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)tab頁面切換功能

更新時間：2018年07月13日 09:08:50 作者：祈澈姑娘

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)tab頁面切換功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

效果圖如下所示：

圖片.png

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({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  ips: [
   { id: "1", title: "日統(tǒng)計", isSelect:true },
   { id: "2", title: "月統(tǒng)計", isSelect: false},
   { id: "3", title: "年統(tǒng)計", isSelect: false},
  ],
  content:"全部"
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 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,
  });
 },
})

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)tab頁面切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: