在购物网站上看到轮播图里面是热门商品的信息,在小程序里用 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事件当前滑块在播放滑动之后,它的一个回调事件、回调事件本意是动画结束时会触发