在购物网站上看到轮播图里面是热门商品的信息,在小程序里用 swiper 滑动视图容器组件来实现。
swiper 滑动视图容器组件的属性:
1.indicator-dots:滑动容器面板组件在面板上加一些指示点,指示点就代表当前容器内的滑块它在容器内的位置,是否显示面板是用indicator-dots 属性来控制的的;
2.indicator-color:它的指示点的颜色以及当前活动元素,也就是当前显示元素指示点的颜色;
3.autoplay:想做一个自动播放轮播图的功能可以用 autoplay属性 来设置;
4.interval:滑块自动播就可以通过 interval属性 来设置播放的间隔;
5.duration:通过 duration属性 设置滑块在滑动时候的动画时长;
6.current:代表了当前滑块所在容器里面的index下标;
7.current-item-id:表示了当前元素自身的一个item-id、item-id代表它元素的唯一性:
8.circular:表示了滑块在滑动的时候是否有衔接的过都方式;
9.vertical:设置滑块滑动的方向上是横向还是纵向;
10.previous-margin 和 next-margin:通过设置来漏出滑块在前一项的边距值以及,它距下一项的边距达到预览的效果;
11.display-multiple-items:设置同时显示滑块数量,滑块数量是不能超过子元素的数量;
12.skip-hidden-item-layout:如果容器内具有多个滑块,不让一些滑块显示的时候 skip-hidden-item-layout属性 来跳过没有显示的滑块布局;
13.bindchange:通过 bind属性 来绑定事件,比如change事件,当前元素改变时会触发change事件;
14.bindanimationfinish:bindanimationfinish事件当前滑块在播放滑动之后,它的一个回调事件、回调事件本意是动画结束时会触发;
swiper 容器组件内只能定义 swiper-item 组件,swiper-item 组件表示了容器的子元素的滑块;
通过实体来看 swiper和 swiper-item之间如何使用:
定义了swiper组件容器,swiper组件容器里面绑定了一些属性:
1、indicator-dots:通过indicator-dots的变量来绑定,是否显示指示点;
2、autoplay:通过autoplay的变量来绑定,是否自动播放;
3、interval:通过interval的变量来绑定,来设置播放的间隔;
4、current:属性是从0开始的,设置是1表示当前要展示滑块,它在容器内是第二个;
5、duration:通过duration的变量来绑定,它动画播放时长;
6、绑定了两个事件分别是:change和animationfinish事件。
7、在swiper容器内通过for循环把定义的子元素的数组循环展现出来;
8、在swiper容器内通过for循环把定义的子元素的数组循环渲染出来;
9、通过wx:for属性:绑定一个backgroud的变量。
在js文件设置了data对象,backgroundz里设置了字符串的数组,包含:demo-text-1、demo-text-2、demo-text-3
在wx:for列表渲染里面使用到了wx:key这个属性,*this表示当前元素和item类示、但是*this使用只能是 字符串或 数字的元素数组。
<swiper
indicator-dots="{{indicatorDost}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
current="1"
duration="{{duration}}"
bindchange="change"
bindanimationfinish="animationfinish"
>
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}">
</swiper-item>
</block>
</swiper>
11、在小程序界面的swiper下面定义了两个按钮以及两个滑动条,这两个按钮以及两个滑动条通过切换开关、以及滑动条的范围,来设置swiper组件容器内元素表现;
运行实例:如图
通过swiper.wxss样式为属性来设置的,demo-text-1 是数组元素的第一项,通过 before为属性在它的内前面插入'A'字符;如图:
demo-text-2 是通过通过 before为属性在它的内前面插入'B'字符;如图:
demo-text-3 是通过通过 before为属性在它的内前面插入'C'字符;如图:
在swiper有三个滑块分别是:滑块A,滑块B,滑块C;
swiper.wxml文件中小程序渲染出来,的滑块当前元素是滑块B;
通过 current属性设置的“1”的效果,如果去掉current="1"这个属性,渲染出来就是第一项,如图:
autoplay是绑定 autoplay变量,在swiper.js文件中初始化默认autoplay是false是禁用自动播放的功能;
在swiper组件内 interval属性 初始化2000毫秒的播放间隔;
duration属性 初始化300毫秒的的动画播放时长;
vertical属性 默认进入纵向播放;
indicatorDots属性 默认显示指示点;如图:
指示点后面跟着一个开关,通过checked属性绑定一个变量以及绑定一个changes事件!
<view class="weui-cell_bd">指示点</view>
<view class="weui-cell_ft">
<switch checked="{{indicatorDost}}" bindchange="changeIndicatorDots" />
如图:
当开启自动播放的开关后,滑块就会根据定义的播放间隔以及动画时长来进行播放,触发了change以及animatonfinish 这两个事件:如图:
current:当前元素的下标;
source:触发这个动作的方式。这里是用autoplay自动播放来触发的;
currentItemId:没有给swiper-item 定义itemId,所以这里是一个空字符串;如图:
animatonfinish事件所携带的信息:1.detail属性携带的信息和change基本一样,如图:
通过设置切换幻灯片时长来控制元素在,切换时动画的时长;如图:
设置自动播放的间隔时长,设置为5296毫秒,如图: