微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

分类：软件问题作者：编程之家用户

本篇内容主要讲解“微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么”吧!

1.实现效果

微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

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不换行

微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

<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: #eeece4;
  color: #333;
  white-space: nowrap;
}

.container-head-sc .item {
  padding: 0 20rpx;
  min-width: 90rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 26rpx;
  display: inline-block;
  height: 50rpx;
}

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

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

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

微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

 <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: #ffffff;
  font-weight: bold;
  background: orange;
  border-radius: 25rpx;
}

添加切换事件

微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

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 事件，event.detail = {current, source}

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

微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

/* 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列表的同步更新

微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么

<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的大小

微信小程序实现滑动/点击切换Tab及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: #ffa500;
  height: 100%;
}
.head {
  height: 90rpx;
  color: #333;
  font-size: 30rpx;
  padding-left: 30rpx;
  font-weight: bold;
  padding-bottom: 10rpx;
  box-sizing: border-box;
}
.head-title {
  position: relative;
  display: inline-block;
  height: 100%;
}
.head-title::after {
  content: '';
  position: absolute;
  z-index: 99;
  width: 15px;
  height: 15px;
  margin-left: -15rpx;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  border-top-right-radius: 100%;
  transform: rotate(-225deg);
  left: 50%;
  bottom: 3px;
}
.container {
  width: 100%;
  height: calc(100% - 90rpx);
  background-color: #fff;
  overflow: hidden;
  border-radius: 30rpx 30rpx 0 0;
}
.container-head {
  width: 100%;
  height: 110rpx;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
}
.container-head-sc {
  height: 50rpx;
  border-radius: 25rpx;
  background: #eeece4;
  color: #333;
  white-space: nowrap;
}
.container-head-sc .item {
  padding: 0 20rpx;
  min-width: 90rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 26rpx;
  display: inline-block;
  /* 引起高度塌陷 */
  vertical-align: top;
  height: 50rpx;
}
.container-head-sc .active {
  color: #ffffff;
  font-weight: bold;
  background: orange;
  border-radius: 25rpx;
}
/* swiper默认高度为150px */
.container-swiper {
  height: calc(100% - 110rpx);
}
.container-swiper-sc {
  height: 100%;
}
.container-swiper-sc .items {
  padding: 0 2%;
  width: 100%;
  box-sizing: border-box;
}
.container-swiper-sc .items .item-img {
  width: 30vw;
  height: 30vw;
  margin-right: 2.8%;
  margin-bottom: 10rpx;
  flex-shrink: 0;
}
.container-swiper-sc .items .item-img:nth-child(3n+3) {
  margin-right: 0;
}
/* 隐藏scroll-view的滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
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),
      });
    });
  },
});

到此，相信大家对“微信小程序实现滑动/点击切换Tab及scroll-left的使用方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是编程之家网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

php字符串拼接要注意什么
在PHP中进行字符串拼接时，应注意以下几点： 使用 .“运算符进行字符串拼接：在PHP中，可以使用”. 运算符来连接两个字符串。 使用双引号或单引号来包裹字符...
python全局变量定义的方法是什么
在Python中，全局变量可以在程序的任何地方进行定义，通常在函数外部进行定义。全局变量可以在整个程序中访问，而不仅仅是在函数内部。要定义一个全局变量，只
电脑显示器上auto指的是什么意思
今天小编给大家分享一下电脑显示器上auto指的是什么意思的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考
ai建立剪切蒙版后如何移动里面的图片
本文小编为大家详细介绍“ai建立剪切蒙版后如何移动里面的图片”，内容详细，步骤清晰，细节处理妥当，希望这篇“ai建立剪切蒙版后如何移动里面的图片”文章能帮...
windows中格式化d盘的后果是什么
这篇文章主要讲解了“windows中格式化d盘的后果是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“wind...
otf文件有哪些特点
这篇“otf文件有哪些特点”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章...
wpsystem文件夹有什么作用
这篇文章主要介绍“wpsystem文件夹有什么作用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“wpsystem文件夹有什
ps单位指的是什么
这篇文章主要介绍了ps单位指的是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ps单位指的是什么文章都会有所收获，下面我...
ipv6对网速有没有提升
这篇文章主要介绍“ipv6对网速有没有提升”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ipv6对网速有没有提升”文...
islide是什么及有什么作用
本文小编为大家详细介绍“islide是什么及有什么作用”，内容详细，步骤清晰，细节处理妥当，希望这篇“islide是什么及有什么作用”文章能帮助大家解决疑惑，下面...
UAC被禁用有哪些影响
本篇内容主要讲解“UAC被禁用有哪些影响”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“UAC被禁用有哪些影响”...
svchost.exe可不可以关掉
今天小编给大家分享一下svchost.exe可不可以关掉的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，
win10有没有32位版本
这篇文章主要介绍“win10有没有32位版本”，在日常操作中，相信很多人在win10有没有32位版本问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，
vlookup如何引用别的表格数据
这篇文章主要介绍了vlookup如何引用别的表格数据的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vlookup如何引用别的表格数据文...
.json文件有什么作用
本文小编为大家详细介绍“.json文件有什么作用”，内容详细，步骤清晰，细节处理妥当，希望这篇“.json文件有什么作用”文章能帮助大家解决疑惑，下面跟着小编的...
vlookup函数的参数是什么意思
这篇文章主要介绍了vlookup函数的参数是什么意思的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vlookup函数的参数是什么意思文...
wmiprvse.exe程序有什么作用
本篇内容介绍了“wmiprvse.exe程序有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情...
Windows wifi的ip地址指的是什么
这篇“Windows wifi的ip地址指的是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅...
video接口指的是什么
今天小编给大家分享一下video接口指的是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大...
路由器wps有哪些优缺点
本篇内容介绍了“路由器wps有哪些优缺点”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot