微信小程序> 小程序swiper,微信小程序swiper的使用干货拿来即用!

小程序swiper,微信小程序swiper的使用干货拿来即用!

浏览量:557 时间: 来源:HaiJun_Aion
好久没更新博客了,今天遇到一个坑,坑了一下午,准备把它记录下来,以便别人也能快速的解决问题。学校项目需要小程序开发,最近把小程序看了,把官方开发指南过了一遍,看了一个黑马的小程序视频,其实我大部分都是看的黑马的视频,黑马有的视频是不错的,去年寒假的时候看了node,那位讲师是真不错啊,后续我追着看了他的讲的Vue,讲的特别细,很耐心。有想看的,下方留言。
开始入坑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通过这个坑总结:不管学哪个组件或者新东西,先弄懂其中的关系之间的联系,不要一上手就敲代码,那样只会浪费时间。知道之间的关系,然后大量例子来构建知识,知识构建例子,例子构建知识,之前看知乎一个小编说的,感觉很深奥。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎