微信小程序> 微信小程序之轮播组件swiper-小程序swiper轮播-swiper小程序

微信小程序之轮播组件swiper-小程序swiper轮播-swiper小程序

浏览量:1728 时间: 来源:Code_星华
1.

swiper,轮播图片,叫滑块视图容器。效果很屌的哦

2.

官方文档例子很好:

3.

https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

4.

先上最终效果:

5.

啦啦啦,代码:

6.

样式无所谓的啦,定义你自己喜欢的就好。

7.

swiper

8.

swiper标签中只可以放置swiper-item

9.

常用属性:

10.

indicator-dots:默认为false,是否显示面板指示点,肯定是true好看呀;

11.

indicator-color:这个是指示点颜色;

12.

autoplay:默认false,是否自动切换,轮播嘛,肯定也是true;

13.

interval:默认5000毫秒,自动切换的时间间隔

14.

duration:默认500,滑动动画的时长,这个我没改过

15.

circular:默认false,是否采用衔接滑动

16.

vertical:默认false,将滑动方向改为纵向

17.

display-mltiple-items:默认1,同时显示的滑块数

18.

事件:

19.

bindchange:改变时触发事件。在回调setData改变current值,应判断source是否由用户触摸事件,避免setData不停调用。

20.

bindanimationfinish:动画结束后触发事件

21.

两个事件的event.detail{current:current,source:source(返回变更原因)}

22.

swiper-item仅可以放在swiper中,宽高自动设置为100%

23.

属性

24.

item-id:标识id

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

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