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

微信小程序中的

最终效果图：


设计思路：
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:
that.item3Show0()
break
default:
that.item4Show0()
break
}，
用switch case决定不同的索引值对应的不同方法。
至于导航栏里的内容，可以直接写死，也可以调用接口这样可以随意添加多个数值，往右滑可查看更多。
4.写完分类后就该编写内容了

内容基本上就是循环填充数值，只不过上面导航栏有多少个值下面循环的就得写几个。current="{{currtab}}"重点是这句，可以将当前内容绑定到与之相对应的导航栏的index。
源代码下载：
https://download.csdn.net/download/jy185445/11110730