微信小程序开发之scroll-view的用法

最新推荐文章于 2025-06-24 21:23:20 发布

原创

最新推荐文章于 2025-06-24 21:23:20 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #scroll-view

本文介绍了微信小程序中scroll-view和swiper组件的使用方法。通过scroll-view实现水平和垂直滑动效果，结合swiper组件实现触屏切换功能。在实际应用中，通过点击导航栏切换不同内容，动态加载数据并绑定当前选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序中的

最终效果图：
实现的效果图
在这里插入图片描述
设计思路：
1.了解scroll-view
scroll-view组件可以实现左滑与上下滑动的效果
scroll-x=“true"开启水平滑动，
scroll-y=“true"开启垂直滑动
2.了解swiper组件
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。所以要实现点击切换效果需要使用到它。
使用格式：

添加要循环的内容

3.先写最顶层的分类
在这里插入图片描述
导航栏重点在切换效果，当点击全部的时候查询出所有物品、点击待付款只显示未付款的物品。
切换的核心思路是先获取点击的索引；
data-current=”{ {item.index}}”
this.data.currtab === e.target.dataset.current
当获取到索引值后：
switch (this.data.currtab) {
case 0:
that.allShow0()
break
case 1:
that.item1Show0()
break
case 2:
that.item2Show0()
break
case 3