位置: IT常识 - 正文

微信小程序实现滑动/点击切换Tab(微信小程序实现文件上传)

编辑:rootadmin
微信小程序实现滑动/点击切换Tab 背景

推荐整理分享微信小程序实现滑动/点击切换Tab(微信小程序实现文件上传),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序实现文件上传,微信小程序实现轮播图,微信小程序实现页面跳转,微信小程序实现轮播效果的组件,微信小程序实现懒加载,微信小程序实现轮播效果的组件,微信小程序实现懒加载,微信小程序实现懒加载,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

1.实现效果微信小程序实现滑动/点击切换Tab(微信小程序实现文件上传)

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: #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==列表的某一项索引表示选中 <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;}添加切换事件 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指定高度,这里我们设置为撑满一屏

/* 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://www.yuucn.com/wp-content/uploads/2023/04/1682149599-47bec120528c89e.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), }); }); },});4.写在最后🍒看完本文如果觉得有用,记得点赞+关注+收藏鸭 🍕更多小程序相关,关注🍥苏苏的bug,🍡苏苏的github,🍪苏苏的码云~
本文链接地址:https://www.jiuchutong.com/zhishi/298790.html 转载请保留说明!

上一篇:用chatgpt写insar地质灾害的论文,重复率只有1.8%,chatgpt4.0写论文不是梦

下一篇:BERT模型基本理念、工作原理、配置讲解(图文解释)(bert模型能做什么)

  • 荣耀play4pro屏幕支持桌面循环吗(荣耀play4pro屏幕亮度多少尼特)

    荣耀play4pro屏幕支持桌面循环吗(荣耀play4pro屏幕亮度多少尼特)

  • 微信语音连接失败是什么原因(微信语音连接失败怎么回事,对方设置了消息免打扰)

    微信语音连接失败是什么原因(微信语音连接失败怎么回事,对方设置了消息免打扰)

  • 不知道抖音号怎么找人(不知道抖音号怎么找到一个人的抖音)

    不知道抖音号怎么找人(不知道抖音号怎么找到一个人的抖音)

  • 滴滴城市修改了两次了怎么办(滴滴车主更改城市能正常接单吗)

    滴滴城市修改了两次了怎么办(滴滴车主更改城市能正常接单吗)

  • 无线协议5和6有什么区别(无线协议5和无线协议6路由器的区别)

    无线协议5和6有什么区别(无线协议5和无线协议6路由器的区别)

  • 苹果7容易发烫正常吗(苹果7容易发烫怎么回事)

    苹果7容易发烫正常吗(苹果7容易发烫怎么回事)

  • 无线桥接影响网速吗(无线桥接影响网速怎么设置)

    无线桥接影响网速吗(无线桥接影响网速怎么设置)

  • 显卡驱动日期是使用日期吗(显卡驱动日期是第一次使用嘛)

    显卡驱动日期是使用日期吗(显卡驱动日期是第一次使用嘛)

  • 快手后台闪退怎么解决方法(快手闪退原因)

    快手后台闪退怎么解决方法(快手闪退原因)

  • qq空间被挡访客啥意思(qq空间被挡访客能全部查看到吗)

    qq空间被挡访客啥意思(qq空间被挡访客能全部查看到吗)

  • 全民k歌a是什么意思(全民k歌a是什么歌)

    全民k歌a是什么意思(全民k歌a是什么歌)

  • 苹果x带nfc功能吗(苹果xnfc功能在哪里打开)

    苹果x带nfc功能吗(苹果xnfc功能在哪里打开)

  • 手机地图怎么测距离(手机地图怎么测速)

    手机地图怎么测距离(手机地图怎么测速)

  • 手机如何识别二维码(手机如何识别二维码的?具体过程是怎样的?)

    手机如何识别二维码(手机如何识别二维码的?具体过程是怎样的?)

  • iPhone11pro怎么设置密码(iphone11pro怎么设置来消息闪光灯)

    iPhone11pro怎么设置密码(iphone11pro怎么设置来消息闪光灯)

  • qq动态仅自己可见怎么取消(qq动态仅自己可看怎么开放)

    qq动态仅自己可见怎么取消(qq动态仅自己可看怎么开放)

  • 荣耀手环3充电要多久(荣耀手环3充电器)

    荣耀手环3充电要多久(荣耀手环3充电器)

  • 八戒网个人怎么接任务(八戒网怎么兼职)

    八戒网个人怎么接任务(八戒网怎么兼职)

  • 蓝牙无线鼠标怎么连接电脑(蓝牙无线鼠标怎么重置)

    蓝牙无线鼠标怎么连接电脑(蓝牙无线鼠标怎么重置)

  • Word中光标到文档开头的快捷键是(word光标怎么移到最前面)

    Word中光标到文档开头的快捷键是(word光标怎么移到最前面)

  • wps计算公式怎么输入(wps计算公式怎么用)

    wps计算公式怎么输入(wps计算公式怎么用)

  • 电视wps投影宝怎么用(wps投影宝能投电视剧吗)

    电视wps投影宝怎么用(wps投影宝能投电视剧吗)

  • 哈罗单车怎么调座位的高低(哈罗单车怎么调整座椅高低)

    哈罗单车怎么调座位的高低(哈罗单车怎么调整座椅高低)

  • 允许安装未知来源的应用程序(允许安装未知来源的应用)

    允许安装未知来源的应用程序(允许安装未知来源的应用)

  • msstat.exe - msstat是什么进程 有什么用

    msstat.exe - msstat是什么进程 有什么用

  • 减值准备为什么影响利润总额
  • 所得税的账务处理流程
  • 2020小规模纳税人增值税税率
  • 无形资产的出售的会计处理
  • 其他债权投资减值账务处理
  • 权益法下被投资企业净资产增加
  • 由受托方提供原料和主要材料,受托方给我们开什么发票
  • 合同解除收取对方的违约金交什么税
  • 行政事业性收据上面的角分无是右下划线吗
  • 哪些产品计算消费税时可以扣除
  • 应付账款是负数怎么回事
  • 转款账户错误退款的账务处理
  • 公允价值变动损益属于当期损益吗
  • 查账征收企业所得税年度申报
  • 小规模纳税人开票要交印花税吗
  • 期末留抵税额转出怎么报税
  • 增值是什么意思解释
  • 小规模纳税人纳税申报时间
  • 30万的营业额20%是多少
  • 计提减值的固定资产处置
  • 高价转让股份
  • 材料验收入库会计分录怎么写计划成本法
  • 外账的银行存款怎么处理
  • 租赁费摊销计入什么科目
  • 个贷系统平帐专户A
  • 代扣代缴的城建税和教育费附加按委托方所在地的税率
  • 只开发票没有合同需要缴纳印花税吗?
  • 食堂充值管理制度
  • 收回应收账款会影响应收账款的账面价值吗
  • wordpress 常用函数
  • 网络不通怎么办苹果手机
  • 工程结算转收入
  • 微信公众号 h5 保存openid
  • 最大的数码相机是多少寸
  • pacis.exe - pacis是什么进程 有什么用
  • php基础入门教程
  • 软件企业高新技术有哪些
  • 资产负债表项目填列的依据是
  • token的用处
  • 圣安德鲁斯市
  • 基于改进yolov4论文
  • 增值税一般纳税人登记管理办法
  • 基于51单片机的电子秤设计
  • 隔两个月发票如何作废
  • 建筑劳务税率是13还是6
  • 电子承兑被退回要重新背书怎么办
  • 应付账款转收入摘要怎么写
  • 加强mysql安全
  • 个人申请代开发票流程怎么操作?
  • 营业成本和生产费用一样吗
  • 记账凭证核算处理方法
  • 累计摊销的会计分录有哪些
  • 小规模无票收入纳税申报表怎么填
  • 城镇土地使用税减免税政策
  • 单独运费怎么做账
  • 税控系统设备可以全额抵扣吗
  • 交通运输行业指什么
  • 经营租入的固定资产计入什么科目
  • 品牌代理费计入什么科目
  • 进项税怎么做账务处理
  • 微信收款计入现金流量吗
  • 缴纳工会经费如何记账
  • 记账凭证的附件和附单据
  • Vista、XP、Windows7下非会员如何去除QQ2009的广告
  • vmp.exe是什么
  • win8如何清空电脑里的所有东西
  • 第一次安装ps后需要哪些设置
  • 联想安装xp系统
  • 如何解决win7系统转为xp系统出现蓝屏怎么办啊
  • win10系统登录密码忘了怎么办
  • win8.1激活方法
  • Fast TileMap
  • node.js怎么样
  • nodejs发送图片给前端
  • 手游 unity
  • js使用类
  • 重庆市电子税务局电话
  • 深圳增值税勾选平台网址
  • 税收负担与税负转嫁
  • 2020十大经济年度人物揭晓
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设