導航欄，左右滑動切換

 

<view class="page">
  <view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
    <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
    <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
  </view>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" style="flex:1" bindchange="swiperChange">
    <swiper-item>
      <scroll-view scroll-y="true" class="scoll-h" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="black" refresher-background="#f4f5f9" refresher-triggered="{{triggered}}" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore">
        <view>我是Tab1開始</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1</view>
        <view>我是Tab1結尾</view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true" class="scoll-h" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="black" refresher-background="#f4f5f9" refresher-triggered="{{triggered}}" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore">
        <view>我是Tab2</view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true" class="scoll-h" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="black" refresher-background="#f4f5f9" refresher-triggered="{{triggered}}" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore">
        <view>我是Tab3</view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

 

Page({
  data: {
    // tab切換 
    currentTab: 0,
    triggered: false
  },
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }
  },
  swiperChange: function (e) {
    this.setData({
      currentTab: e.detail.current,
    })
  },
  onLoad: function (options) {
  },
  onRefresh() {
    if (this._freshing) return
    this._freshing = true
    setTimeout(() => {
      this.setData({
        triggered: false,
      })
      this._freshing = false
    }, 3000)
  },
  //自定義下拉刷新被複位
  onRestore(e) {
    console.log(this.data.currentTab);
  },
})

page {
  height: 100%;
}

.page {
  margin-left: 10rpx;
  margin-right: 10rpx;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.swiper-tab {
  display: flex;
  flex-direction: row;
  line-height: 80rpx;
}

.tab-item {
  width: 33.3%;
  text-align: center;
  font-size: 15px;
  color: #333;
}

.on {
  color: #0072c6;
  border-bottom: 5rpx solid #0072c6;
}

.scoll-h {
  height: 100%;
}