微信小程序导航栏，左右滑动切换，根据内容将垂直显示（CSS flex-direction），自定义下拉刷新

效果展示

　　

wxml

<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>

 js

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);
  },
})

wxss

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%;
}