1.swiper组件是干嘛的？

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

2.swiper和swiper-itme怎么使用？

接下来我尝试教大家怎么使用swiper组件去做一个轮播图效果

和之前一样，先设置一个空页面。

我们先写入一个基础代码格式

<swiper><swiper-item><view>A</view></swiper-item>
</swiper>

我们可以看到代码中swiper标签下有一个swiper-itme标签下有一个view标签，

为什么这么嵌套呢？

因为swiper把他比作一个大盒子，swiper-itme 比作一个大盒子中的小盒子如图

正常情况下swiper代表整个块是轮播图，seiper-itme代表每一张图，但是我们写代码的原则是能不能懂他原来的框架就不动，尽然swiper-itme是代表每一张图，我们就在里面写image或这view都可以对吧，所以由此得出上面的格式，但是我上图只显示了一个A，如果我要多张轮播图，是不是要复制多个swiper-itme标签由此可以得出一下代码：

<swiper><swiper-item><view>A</view></swiper-item><swiper-item><view>B</view></swiper-item><swiper-item><view>C</view></swiper-item>
</swiper>

这样我们就能看到左边的示范图他就可以滑动了

这时候为了方便查看我们给代码加一点样式

修改后代码为

list.wxml

<swiper class="siwper-container"><swiper-item><view class="itme">A</view></swiper-item><swiper-item><view class="itme">B</view></swiper-item><swiper-item><view class="itme">C</view></swiper-item>
</swiper>

list.wxss

.itme{height: 150px;background-color: lightskyblue;text-align: center;line-height: 150px;
}

到这里轮播图基本制作完成了，接下来我们看看可以经常使用的属性

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0

更多属性进入微信开发小程序swiper使用文档

常用属性我们来测试一下，

indicator-dots 的使用（是否显示面板指示点）

我们把属性写在swiper后面试试效果

通过上图可以看出，添加了indicator-dots属性后指示点出来了

indicator-color 属性的使用（未选中指示点颜色）

我们尝试把指示点修改颜色

我们可以看得到，左边演示的指示点已经被我们更换成红色了透明70%的颜色

indicator-active-color 属性的使用（当前选中的指示点颜色）

我们看到上图只是修改了未选择的颜色，现在我们来修改一个选中后的颜色

这时我们看图就能发现，颜色已经被我们修改成绿色了

autoplay属性的使用（是否自动切换）

在生活中我们能看到很多轮播图，他都是自动切换的，可是我们上面做了这么多工作发现图片都是固定不动的需要人为去参与滑动，这时就有了autoplay属性让他自动切换，实现我们不动，轮播图自动播放

我们会发现添加这个属性后，每过一段时间会自动播放

interval属性的使用（自动切换时间间隔）

这时有人就会问，我既然自动切换了，哪怎么才能控制时间呢？有的图我要比较慢切换，有的图我要他唰唰的跳过，所以就有了interval属性控制自动切换的时间

我们尝试添加上去看看，时间单位是毫秒

相当于每过2000毫秒就更换一张图片，更具自己的情况进行修改

circular属性使用（是否采用衔接滑动）

当我们图片达到10张图片的时候，我们滑动到最后一张，但是又想回到第一张发现回不去了，很麻烦需要一直向左滑动，所以就有了衔接滑动，从最后一张到第一张图片，我们没添加只前是这样的。

最后一张想滑动却不给我滑动，这时候添加试试

添加后发现他可以衔接滑动了，这样增加了用户体验。

到目前位置swiper组件常用属性解释到此结束了，感谢大家阅读，欢迎加入我们一起学习

微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程相关推荐

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放
微信小程序自带的方法 wx.previewMedia 预览图片和视频. 图片 wx.previewImage 支持PC端可以进行播放, 视频没有找到对应的方法在真机和手机端都可以进项展示,PC端不 ...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...
微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...
uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
小程序轮播图组件跳转到自定义页面
1.轮播图组件wxml代码 2.轮播图组件js 3.在页面引入轮播图组件 4.设置页面js 5.未跳转之前页面 6.点击轮播图跳转
轮播图Swiper小白点（分页器）与图片不同步即失效问题Vue
一.现象在使用Swiper轮播图时,图片正常轮播,但是分页器也就是下方显示页码小白点的却跟当前图片的顺序不相对应二.分析主要是因为在建立swiper对象时,未在数据请求结束后初始化swiper对 ...
swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下 ...
摹客RP，新增轮播图组件
Hello,小伙伴们,又到了摹客的新功能播报时间. 本月更新,摹客RP新增组件--轮播图,从此做轮播图页面能更简单了.摹客协作可支持识别Sketch上传设计稿中文字的颜色变量,并针对不少细节功能进行了 ...

微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程