青浦小程序开发,小程序轮播案例2
<!--index.wxml-->
<view class="container">
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}">
<block wx:for="{{picList}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="aspectFill" bindtap='previewImg' data-previewurl='{{picList}}'
data-currenturl='{{item}}'/>
</swiper-item>
</block>
</swiper>
</view>
//index.js文件
//获取应用实例
const app = getApp()
Page({
data: {
beforeColor: "#ffffff",//指示点颜色
afterColor: "#D19634"//当前选中的指示点颜色
},
onLoad: function() {
var that = this
var picList = []
picList.push("//images/meat1.jpg")
picList.push("//images/meat2.jpg")
picList.push("//images/meat3.jpg")
that.setData({
picList: picList,
})
}
})
/**index.wxss文件**/
page {
background-color:#b3d4db;
}
.container{
padding: 0px;
width:100%;
}
swiper{
width: 100%;
}
.slide-image{
width: 100%;
height: 100%;
}