微信小程序实现滑动/点击切换Tab

背景

swiper+scroll-view实现滑动/点击切换Tab,以及scroll-left的使用~

🥇文末分享源代码。记得点赞+关注+收藏!

1.实现效果

图片

在这里插入图片描述

2.实现步骤

2.1 scroll-view实现tab列表

scroll-view:可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px。 

scroll-x(boolean):允许横向滚动 

scroll-y(boolean):允许纵向滚动 

scroll-left(number/string):设置横向滚动条位置 

scroll-with-animation(boolean):在设置滚动条位置时使用动画过渡

  • 定义一个tab列表,scroll-view包裹,允许横向滚动,设置scroll-left默认为0
  • 每个tab设置为display: inline-block,scroll-view设置 white-space: nowrap不换行

在这里插入图片描述

<scroll-view scroll-x class="container-head-sc" scroll-left="{{sleft}}" scroll-with-animation="true">
  <view class="item" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
 </scroll-view>


.container-head-sc {
  height: 50rpx;
  border-radius: 25rpx;
  background: 

  • 给每个tab设置vertical-align: top;防止高度塌陷


.container-head-sc .item{
  /* 防止高度塌陷 */
 + vertical-align: top;
}

  • 添加当前激活tab样式,定义当前选中项索引currentTab默认为0(即选中第一个),当currentTab==列表的某一项索引表示选中


 <view class="item {{currentTab == index ?'active':''}}" data-current="{{index}}" catchtap="handleTabChange" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>


.container-head-sc .active {
  color: 

  • 添加切换事件


handleTabChange(e) {
 let { current } = e.target.dataset;
 if (this.data.currentTab == current || current === undefined) return;
 this.setData({
   currentTab: current,
 });
},

2.2 swiper+scroll-iew 实现内容列表

swiper:滑块视图容器。默认高度为150px;

current(number):当前所在滑块的 index,默认为0 

autoplay(boolean):是否自动切换 

bindchange(eventhandle):current 改变时会触发 change 事件

  • swiper包裹内容列表,需要为swiper指定高度,这里我们设置为撑满一屏

在这里插入图片描述

/* swiper默认高度为150px */
.container-swiper {
  height: calc(100% - 110rpx);
}

  • 设置swiper的current为当前选中的tab标签索引,即currentTab


<swiper current="{{currentTab}}"  class="container-swiper">
 <swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
 </swiper-item>
</swiper>

  • swiper-item展示内容列表,用scroll-view包裹内容,设置竖向滚动,使用竖向滚动时,需要给scroll-view一个固定高度,这里将scroll-view高度设置为100%,与swiper同高,铺满一屏


<swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
  <scroll-view scroll-y class="container-swiper-sc">
     <view class="flex-wrap flex-row items">
     ....//内容
     </view>
   </scroll-view>
 </swiper-item>


.container-swiper-sc {
  height: 100%;
}

  • swiper添加bindchange事件,当滑动时候,动态的设置currentTab,实现tab列表的同步更新


<swiper current="{{currentTab}}" bindchange="handleSwiperChange" class="container-swiper">
 ....//内容
</swiper>


  handleSwiperChange(e) {
    this.setData({
      currentTab: e.detail.current,
    });
  },

  • 可以发现,当swiper所在滑块的 index超出tab列表的可视范围,我们得手动滑动tab列表才能看见当前所选中的tab
  • 找到2.1节 scroll-left=”{{sleft}}”,scroll-left用来设置横向滚动条位置,也就是说,我们可以监听swiper的滚动,在滑块所在的index改变的时候,去动态的设置scroll-left的位置
  • scroll-left的计算

wx.createSelectorQuery():返回一个 SelectorQuery 对象实例SelectorQuery.selectAll(string selector):在当前页面下选择匹配选择器 selector 的所有节点。


getScrollLeft() {
 const query = wx.createSelectorQuery();
 query.selectAll(".item").boundingClientRect();
 //这里将会返回页面中所有class为item的节点,个数为tab列表的长度
 query.exec((res) => {
   let num = 0;
   for (let i = 0; i < this.data.currentTab; i++) {
     num += res[0][i].width;
   }
   // 计算当前currentTab之前的宽度总和
   this.setData({
     sleft: Math.ceil(num),
   });
 });
},

  • 修改swiper的bindchange事件,每次滑块的变化,都重新计算scroll-left的大小


  handleSwiperChange(e) {
   + this.getScrollLeft();
  },

3.实现代码


<view class="head flex-row">
  <view class="head-title">scroll-left</view>
</view>
<scroll-view scroll-y class="container">
  <view class="container-head flex-row">
    <scroll-view scroll-x class="container-head-sc" scroll-left="{{sleft}}" scroll-with-animation="true">
      <view class="item {{currentTab == index ?'active':''}}" data-current="{{index}}" catchtap="handleTabChange" wx:key="list" wx:for="{{list}}" wx:for-index="index">tab-{{index+1}} </view>
    </scroll-view>
  </view>
  <swiper current="{{currentTab}}" bindchange="handleSwiperChange" class="container-swiper">
    <swiper-item class="flex-column j_c" wx:for="{{list}}" wx:key='index'>
      <scroll-view scroll-y class="container-swiper-sc">
        <view class="flex-wrap flex-row items">
          <block wx:for="{{item}}" wx:key="index">
            <image src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" mode="aspectFill" class="item-img" />
          </block>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</scroll-view>


page {
  background-color: 

Page({
  data: {
    currentTab: 0,
    sleft: "", //横向滚动条位置
    list: [1, 2, 3, 4, 5, 6, 7, 22, 32],//测试列表
  },
  handleTabChange(e) {
    let { current } = e.target.dataset;
    if (this.data.currentTab == current || current === undefined) return;
    this.setData({
      currentTab: current,
    });
  },
  handleSwiperChange(e) {
    this.setData({
      currentTab: e.detail.current,
    });
    this.getScrollLeft();
  },
  getScrollLeft() {
    const query = wx.createSelectorQuery();
    query.selectAll(".item").boundingClientRect();
    query.exec((res) => {
      let num = 0;
      for (let i = 0; i < this.data.currentTab; i++) {
        num += res[0][i].width;
      }
      this.setData({
        sleft: Math.ceil(num),
      });
    });
  },
});

4.写在最后

看完本文如果觉得有用,记得点赞+关注+收藏鸭
更多小程序相关,关注苏苏的bug,苏苏的github,苏苏的码云~

参考链接:

苏苏的github:https://github.com/susu-hu/susu-mini-tem

苏苏的码云:https://gitee.com/susuhhhhhh/wxmini_demo

声明:文中观点不代表本站立场。本文传送门:http://eyangzhen.com/190825.html

联系我们
联系我们
分享本页
返回顶部