2020年6月29日

小程序轮播图swiper组件使用代码片段


切图网专注于小程序切图,在h5切图中一般采用swiper插件,而在小程序中已经自带有swiper组件(和swiper插件不同,只是命名不同),根据官方文档,我们可以用下列代码生成一个轮播图:


<!-- wxml -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
  <block wx:for="{{bnrUrl}}" wx:for-index="index">
    <swiper-item>
      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
    </swiper-item>
  </block>
</swiper>
<!-- wxml -->

//js
Page({
data: {
"bnrUrl": [{
"url": "img/1242x366-1531449084.jpg"
}, {
"url": "img/1242x366_djj_0706-1530871651.jpg"
}, {
"url": "img/1242x366_lyx_0709-1531122892.jpg"
}, {
"url": "img/14540040236323_1_o.jpg"
}]
}
});
//js


//wxss
.u-wrp-bnr {
width: 100%;
height: 200rpx;
display: block;
position: relative;
top: 100rpx;
background: #f0f0f0;
}
.u-img-slide {
width: 100%;
height: inherit;
}
//wxss

 

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732