1. 程式人生 > >微信小程式實現tab頁面切換功能

微信小程式實現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({

  /**
   * 頁面的初始資料
   */
  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,
    });
  },

})