小程序swiper組件實(shí)現(xiàn)點(diǎn)擊圖片切換的效果
2020-09-27|HiShop
導(dǎo)讀：小程序swiper組件實(shí)現(xiàn)點(diǎn)擊圖片輪播切換的效果，還是比較簡(jiǎn)單的。...
小程序swiper組件實(shí)現(xiàn)點(diǎn)擊圖片輪播切換的效果，還是比較簡(jiǎn)單的。
比如：
1.index.wxml
<!--index.wxml-->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<block wx:for="{{movies}}" wx:for-index="index">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
這里有幾個(gè)屬性需要說(shuō)明.
微信小程序開(kāi)發(fā)的循環(huán)用到了
我這里是遍歷movies[]數(shù)組.
2.index.js
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
movies:[
{url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,
{url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,
{url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,
{url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}
]
},
onLoad: function () {
}
})
3.WXML
/**index.wxss**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。
更多小程序開(kāi)發(fā)案例，盡在：http://www.gstsqh.com.cn/xiaocx/kaifa.html
- 關(guān)注官方公眾號(hào) -
提供多種電商軟件及解決方案