• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序导航栏,左右滑动切换,根据内容将垂直显示(CSS flex-direction),自定义 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果展示

  

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap