怎么用小程序swiper组件实现点击图片切换效果
导读：本文共1138字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 小程序swiper组件实现点击图片轮播切换的效果，还是比较简单的。 比如： 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="true" autoplay=... ...
目录
(为您整理了一些要点),点击可以直达。小程序swiper组件实现点击图片轮播切换的效果，还是比较简单的。
比如：
1.index.wxml
<!--index.wxml-->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<block wx:for="{{movies}}" wx:for-index="index">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
这里有几个属性需要说明.
微信小程序开发的循环用到了
我这里是遍历movies[]数组.
2.index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
movies:[
{url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,
{url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,
{url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,
{url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}
]
},
onLoad: function () {
}
})
3.WXML
/**index.wxss**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">怎么用小程序swiper组件实现点击图片切换效果的详细内容，希望对您有所帮助，信息来源于网络。