我是靠谱客的博主 香蕉天空,这篇文章主要介绍微信小程序的轮播功能,现在分享给大家,希望可以做个参考。

我们在官网上可以看到轮播相关的说明了,这里是通过一个实例来说明一下微信小程序的轮播功能的实现效果:

先看一下效果图:

微信小程序的轮播功能

JS代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var app = getApp(); Page({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: true, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function(e) { this.setData({ interval: e.detail.value }) }, durationChange: function(e) { this.setData({ duration: e.detail.value }) }, })
登录后复制

data中是要设置的数据。indicatorDots设置是否有点,interval设置每隔多少毫秒进行切换,duration设置切换的速度。中对所有的照片进行遍历。这些值通过data然后在函数中进行设置。

WXML代码:

复制代码
1
2
3
4
5
6
7
8
<swiper indicator-dots="{{indicatorDots}}" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="400" height="150"/> </swiper-item> </block> </swiper>
登录后复制

以上就是这个轮播的的过程,主要应用组件,autoplay设置是否自动播放,interval设置每隔多少毫秒进行切换,duration设置切换的速度。中对所有的照片进行遍历。

通过简单的配置可以达到轮播的效果,还是非常容易实现的。

最后

以上就是香蕉天空最近收集整理的关于微信小程序的轮播功能的全部内容,更多相关微信小程序内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(91)

评论列表共有 0 条评论

立即
投稿
返回
顶部