上海小程序开发，小程序轮播案例
====index.wxml文件代码显示====
<view class="container">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="150"/>
</navigator>
</swiper-item>
</block>
</swiper>
</view>
====index.js文件代码显示====
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
imgUrls: [
{
link: '/pages/index/index',
url: 'ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623318287,3864173199&fm=27&gp=0.jpg'
}, {
link: '/pages/logs/logs',
url: 'timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532429494100&di=6d4f20a64fb21f113e1bb67be1cdbb63&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F121019%2F240425-12101920154274.jpg'
}, {
link: '/pages/index/index',
url: 'timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532429494100&di=f3712ddf9ca5b37bf81f2cea4ae40c54&imgtype=0&src=http%3A%2F%2Fpic32.photophoto.cn%2F20140808%2F0042040230406581_b.jpg'
}
],
indicatorDots: true, //小点
autoplay: true, //是否自动轮播
interval: 3000, //间隔时间
duration: 500, //滑动时间
beforeColor: "#ffffff",//指示点颜色
afterColor: "#D19634"//当前选中的指示点颜色
}
})
====index.wxss文件代码显示====
注意：.container swiper 和image的样式必须要写，否则轮播图片不显示，这个应该是腾讯的一个bug吧？
注意：.container swiper 和image的样式必须要写，否则轮播图片不显示，这个应该是腾讯的一个bug吧？
.container{
padding: 0px;
width:100%;
}
.slide-image{
width: 100%;
}
.container swiper{
width: 100%;
}
.container swiper image{
width: 100%;
}