文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-08-16 21:56

关注

背景

👏 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-{{index+1}}  
.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;}
.container-head-sc .item{   + vertical-align: top;}
 tab-{{index+1}} 
.container-head-sc .active {  color: #ffffff;  font-weight: bold;  background: orange;  border-radius: 25rpx;}
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}

在这里插入图片描述

.container-swiper {  height: calc(100% - 110rpx);}
  
            ....//内容         
.container-swiper-sc {  height: 100%;}
....//内容
  handleSwiperChange(e) {    this.setData({      currentTab: e.detail.current,    });  },

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),  });});},
  handleSwiperChange(e) {   + this.getScrollLeft();  },

3.实现代码

  scroll-left            tab-{{index+1}}                                                                               
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;}.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;}::-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),      });    });  },});

4.写在最后🍒

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

来源地址:https://blog.csdn.net/qq_48085286/article/details/128122310

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯