小程序轮播图

页面代码

<pre class="brush:xml;toolbar:false"><view class="container">
 
 <swiper class="home-swiper" indicator-dots="true" autoplay="{{lb.autoplay}}" 
 interval="{{lb.interval}}" duration="{{lb.duration}}">
 <block wx:for-items="{{items}}">
 <swiper-item>
 <image src="{{item.imgurl}}" class="slide-image" />
 </swiper-item>
 </block>
 </swiper>
</view></pre>


 JS代码 

<pre class="brush:js;toolbar:false">Page({
 data: {
 //轮播图配置
 lb:{
 autoplay: true,
 interval: 3000,
 duration: 1200,
 items:[]
 }
 },
 onLoad: function () {
 var that = this; 
 var data = {
 "datas": [
 {
 "id": 1,
 "imgurl": "../../images/a1.jpg"
 },
 {
 "id": 2,
 "imgurl": "../../images/a2.jpg"
 }
 ]
 }; 
 that.setData({
 lb.data: data.datas
 })
 }
})</pre>

 样式代码  

<pre class="brush:css;toolbar:false">.home-swiper {
 width: 95%;
 height: 360rpx;
}
.slide-image {
 width: 100%;
 height: 100%;
}</pre>

小程序轮播图

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它