1.小程序实现Banner图
微信小程序实现Banner相对于Android实现Banner来说非常便捷的,如图:
2.在.js
中定义数据源如下:
Page({
/**
* 页面的初始数据
*/
data: {
// Banner数据
images:[
"http://img.zcool.cn/community/014056564bd8596ac7251c94eb5559.jpg",
"http://img.zcool.cn/community/01e03b58047e96a84a0e282b09e8fc.jpg",
"http://pic.90sjimg.com/back_pic/00/00/69/40/d678a42886e0232aaea0d6e69e9b1945.jpg",
"http://img.zcool.cn/community/0132dd55800bc700000059ffbe83e9.jpg@1280w_1l_2o_100sh.jpg",
"http://img.zcool.cn/community/0154755a2df102a80120ba3828b5af.jpg@1280w_1l_2o_100sh.jpg",
"http://pic.90sjimg.com/back_pic/00/00/69/40/bf4f8e2ab7e05dc3c7cc2a7f7e9c2fe7.jpg",
"http://img.zcool.cn/community/01a2a2594943d3a8012193a328e0fd.jpg@1280w_1l_2o_100sh.jpg"
],
// 是否显示面板指示点
indicatorDots: true,
// 滑动方向是否为纵向
vertical: false,
// 自动切换
autoplay: true,
// 采用衔接滑动
circular: true,
// 自动切换时间间隔2s
interval: 2000,
// 滑动动画时长0.5s
duration: 500,
// 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
previousMargin: 0,
// 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
nextMargin: 0
},
}
3.在.wxss
编写组件样式如下:
.swiper-item-images{
width: 100%;
height: 300rpx;
}
4.在.wxml
中具体使用
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
circular="{{circular}}"
vertical="{{vertical}}"
interval="{{interval}}"
duration="{{duration}}"
previous-margin="{{previousMargin}}px"
next-margin="{{nextMargin}}px">
<block wx:for='{{images}}' wx:key='index'>
<swiper-item>
<image src='{{item}}' mode='aspectFill' class='swiper-item-images'/>
</swiper-item>
</block>
</swiper>