微信小程序swiper+scroll-view实现滑动切换内容

1.实现效果

2.实现原理

• swiper：滑块视图容器。其中只可放置swiper-item组件，设置不同的swiper-item，通过bindchange事件，动态的改变当前选中项，swiper默认高度为150，必须设置相应高度才可。
• scroll-view：包裹整个页面，设置scroll-x或scroll-y，改变滚动的方向。

3.实现代码

<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}">
    <view class="navigate-item" id="item{{index}}" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">
        <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view>
        <view class="currtline {{currentTab === index ? 'active' : ''}}" wx:if="{{currentTab === index}}"></view>
    </view>
</scroll-view>
<swiper indicator-dots="{{false}}" bindchange="handleSwiper" current="{{currentTab}}">
    <block wx:for="{{tabList}}" wx:key="index">
            <swiper-item style="overflow: scroll;">
        <view class="tab_title">tab{{currentTab+1}}内容</view>
                <scroll-view scroll-y refresher-enabled refresher-background="#F6F7F8" refresher-triggered="{{isRefresh}}"  bindrefresherrefresh="refresherpulling" bindscrolltolower="handleTolower">
                    <view class="swiper-item" wx:for="{{20}}" wx:key="index">第{{index + 1}}条数据~</view>
                </scroll-view>
            </swiper-item>
    </block>
</swiper>

.scroll-wrapper {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  background: #FFF;
  height: 90rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}
/* 去掉滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.navigate-item {
  display: inline-block;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
  margin: 0 30rpx;
}

.names {
  font-size: 28rpx;
  color: #3c3c3c;
}

.names.active {
  color: #db7c22;
  font-weight: bold;
  font-size: 34rpx;
}

.currtline {
  margin: -8rpx auto 0 auto;
  width: 100rpx;
  height: 8rpx;
  border-radius: 4rpx;
}

.currtline.active {
  background: #db7c22;
  transition: all .3s;
}
.tab_title{
  margin: 20rpx;
  border: 1px solid #db7c22;
  padding: 20rpx;
  box-sizing: border-box;
}
swiper {
  min-height: calc(100vh - 100rpx);
}
.swiper-item {
  width: 100%;
  padding: 32rpx ;
  box-sizing: border-box;
}

scroll-view {
  height: calc(100vh - 100rpx);
}

// pages/another/scroll-x/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isRefresh: false,

    currentTab: 0,
    tabList: [
      {
      name: 'tab一'
    },
    {
      name: 'tab二'
    }, {
      name: 'tab三'
    }, 
    {
      name: 'tab四'
    },
    {
      name: 'tab五'
    }, 
    {
      name: 'tab六'
    },
    {
      name: 'tab七'
    },
  ]

  },

  tabNav(e) {
    let currentTab = e.currentTarget.dataset.index
    this.setData({
      currentTab
    })
  },
  handleSwiper(e) {
    let {current,source} = e.detail
    if (source === 'autoplay' || source === 'touch') {
      const currentTab = current
      this.setData({
        currentTab
      })
    }
  },
  handleTolower(e){
    wx.showToast({
      title: '到底啦'
    })
  },
  refresherpulling() {
    wx.showLoading({
      title: '刷新中'
    })
    setTimeout(() => {
      this.setData({
        isRefresh: false
      })
      wx.showToast({
        title: '加载完成'
      })
    }, 1500)
  },
  onLoad: function (options) {

  },


  onShow: function () {

  },

 
})

4.完整代码，尽在公众号'苏苏的bug',更多小程序demo，关注苏苏的码云，如果对你有用，欢迎您的star+订阅！