微信小程序-swiper的使用（干货拿来即用！）

好久没更新博客了，今天遇到一个坑，坑了一下午，准备把它记录下来，以便别人也能快速的解决问题。学校项目需要小程序开发，最近把小程序看了，把官方开发指南过了一遍，看了一个黑马的小程序视频，其实我大部分都是看的黑马的视频，黑马有的视频是不错的，去年寒假的时候看了node，那位讲师是真不错啊，后续我追着看了他的讲的Vue，讲的特别细，很耐心。有想看的，下方留言。

开始入坑 Swiper

先上效果图

当初想着找一个UI框架组件实现它，找了好几个都没有。心凉凉，那么只能自己来了。

Swiper 格式

<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots><swiper-item class="" item-id=""  ><image class="" src="" /><text class="" ></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 层

<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots><block wx:for="{{dormList}}" wx:for-index="dormIndex" wx:for-item="swiperItem" wx:key="dormIndex"><swiper-item class="" item-id=""  ><block wx:for="{{swiperItem}}" wx:for-index="NumIndex" wx:for-item="NumList" wx:key="NumIndex"><view class="" hover-class="none" hover-stop-propagation="false"><image class="" src="{{NumList.image}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""/><text class="" selectable="false" space="false" decode="false">{{NumList.id}}</text>   </view></block></swiper-item>83</block>
</swiper>

接着咋大白话

Swiper 是一个滑块视图容器，它很多属性就不在着列了。
swiper-item 是Swiper 的滑块，如果加入滑动内容，那么就在swiper-item中添加
想实现滑动显示多页效果，那么就需要定义多维数组，如果想实现单页滑动的话，那么就定义一维数组，但是需要注意的是，如果swiper-item中内容过多时，就会超出Swiper容器的大小，部分内容就会隐藏，数据多时建议定义为二维数组。
一个滑块显示多少内容根据你定义的多维数组中某个数组的数据多少显示，通过简单的布局就可实现一页显示多个内容

Swiper 容器包裹swiper-item
<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
然后这可以控制显示多少块  swiper-item ， 一般这个部位都会通过block标签来遍历，它不会占用页面位置<swiper-item class="" item-id=""  >这显示一个swiper-item要显示的内容<image class="" src="" /><text class="" ></text>   </view></swiper-item>
</swiper>

通过这个坑总结：

不管学哪个组件或者新东西，先弄懂其中的关系之间的联系，不要一上手就敲代码，那样只会浪费时间。
知道之间的关系，然后大量例子来构建知识，知识构建例子，例子构建知识，之前看知乎一个小编说的，感觉很深奥。

微信小程序-swiper的使用（干货拿来即用！）相关推荐

绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
微信小程序swiper不限数量不卡顿
详情见:微信小程序swiper不限数量不卡顿轮播图优化组件(含uniapp版和纯微信开发者工具版),欢迎打包下载啦_swiper小程序插件_KV_T的博客-CSDN博客
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
微信小程序swiper组件宽高自适应方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适应的话请改成 wid ...
微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
微信小程序swiper滑块视图容器控件使用整理
2019独角兽企业重金招聘Python工程师标准>>> 一.默认使用 indicator-dots,指示是否面板显示 indicator-color,指示点颜色 indicator- ...
微信小程序 swiper 点击切换，左右滑动，自动滑动，源码下载
已解决不同页面不同高度已解决卡死问题 .wxml <view class="swiper-tab"> <view class="swiper-ta ...