微信小程序开发笔记(五)--swiper实现tab选项卡

wxml：

<!--pages/index/index.wxml-->
<view class="swiper-tab">
    <view class="{{tab===0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">{{tablist1}}</view>
    <view class="{{tab===1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">{{tablist2}}</view>
    <view class="{{tab===2 ? 'on' : ''}}" data-current="2" bindtap="tab_click">{{tablist3}}</view>
    <view class="{{tab===3 ? 'on' : ''}}" data-current="3" bindtap="tab_click">{{tablist4}}</view>
</view>

<swiper circular="true" current="{{tab}}" class="swiper-box" bindchange="tab_slide">
    <swiper-item>
        1
    </swiper-item>

    <swiper-item>
        2
    </swiper-item>

    <swiper-item>
        3
    </swiper-item>

    <swiper-item>
        4
    </swiper-item>
</swiper>

wxss：

/* pages/index/index.wxss */
.swiper-tab>view {
  display: inline-block;
  line-height: 80rpx;
  text-align: center;
  background-color: white;
  width: 25%;
  font-size: 30rpx;
}

.swiper-box {
  width: 100%;
  min-height: calc(100vh - 80rpx);
  font-size: 34rpx;
  background-color: #e6e6e6;
}

.swiper-box swiper-item {
  overflow-y: auto;
}

.on {
  color: blue;
}

js：

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tab: 0,
    tablist1: '全部',
    tablist2: '未审核',
    tablist3: '审核通过',
    tablist4: '审核失败',

  },
  tab_slide: function (e) { //滑动切换tab 
    var that = this;
    that.setData({
      tab: e.detail.current
    });
    console.log('滑动切换tab');
  },

  tab_click: function (e) { //点击tab切换
    var that = this;
    if (that.data.tab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        tab: e.target.dataset.current
      });
      console.log('点击tab切换');
    }
  },

}）

来源：https://www.cnblogs.com/antao/p/12624210.html

标签

微信开发

swipe

tab