开始入坑Swiper先上效果图
当初想着找一个UI框架组件实现它,找了好几个都没有。心凉凉,那么只能自己来了。Swiper格式swiperstyle="width:200rpx,height:900rpx"class="contaner"indicator-dotsswiper-itemclass=""item-id=""imageclass=""src=""/textclass=""/text/view/swiper-item/swiper实现上面效果JS数据data:{dormList:[//第一个swiper-item[{id:"第一个",image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:2,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:3,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:4,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:2,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:3,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:4,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"}],//第二个swiper-item[{id:"第二个",image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:1,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:1,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"},{id:1,image:"https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"}]],}View层swiperstyle="width:200rpx,height:900rpx"class="contaner"indicator-dotsblockwx:for="{{dormList}}"wx:for-index="dormIndex"wx:for-item="swiperItem"wx:key="dormIndex"swiper-itemclass=""item-id=""blockwx:for="{{swiperItem}}"wx:for-index="NumIndex"wx:for-item="NumList"wx:key="NumIndex"viewclass=""hover-class="none"hover-stop-propagation="false"imageclass=""src="{{NumList.image}}"mode="aspectFit|aspectFill|widthFix"lazy-load="false"binderror=""bindload=""/textclass=""selectable="false"space="false"decode="false"{{NumList.id}}/text/view/block/swiper-item83/block/swiper接着咋大白话Swiper是一个滑块视图容器,它很多属性就不在着列了。swiper-item是Swiper的滑块,如果加入滑动内容,那么就在swiper-item中添加想实现滑动显示多页效果,那么就需要定义多维数组,如果想实现单页滑动的话,那么就定义一维数组,但是需要注意的是,如果swiper-item中内容过多时,就会超出Swiper容器的大小,部分内容就会隐藏,数据多时建议定义为二维数组。一个滑块显示多少内容根据你定义的多维数组中某个数组的数据多少显示,通过简单的布局就可实现一页显示多个内容Swiper容器包裹swiper-itemswiperstyle="width:200rpx,height:900rpx"class="contaner"indicator-dots然后这可以控制显示多少块swiper-item,一般这个部位都会通过block标签来遍历,它不会占用页面位置swiper-itemclass=""item-id=""这显示一个swiper-item要显示的内容imageclass=""src=""/textclass=""/text/view/swiper-item/swiper通过这个坑总结:不管学哪个组件或者新东西,先弄懂其中的关系之间的联系,不要一上手就敲代码,那样只会浪费时间。知道之间的关系,然后大量例子来构建知识,知识构建例子,例子构建知识,之前看知乎一个小编说的,感觉很深奥。













