小程序模板網(wǎng)

微信小程序輪播圖實(shí)例:自定義指示點(diǎn)的樣式,上下滾動(dòng)

發(fā)布時(shí)間:2017-12-02 16:58 所屬欄目:小程序開發(fā)教程

輪播圖是大部分應(yīng)用的一個(gè)常用的功能,常用于廣告投放、產(chǎn)品展示、活動(dòng)展示等等。漂亮的輪播圖效果可以吸引用戶的點(diǎn)擊,達(dá)到推廣產(chǎn)品的作用。廢話少說,下面開始動(dòng)手。業(yè)務(wù)需求: ...

 
 
 


輪播圖是大部分應(yīng)用的一個(gè)常用的功能,常用于廣告投放、產(chǎn)品展示、活動(dòng)展示等等。 
漂亮的輪播圖效果可以吸引用戶的點(diǎn)擊,達(dá)到推廣產(chǎn)品的作用。 
廢話少說,下面開始動(dòng)手。

業(yè)務(wù)需求: 
5個(gè)圖片輪番播放,可以左右滑動(dòng),點(diǎn)擊指示點(diǎn)可以切換圖片

重點(diǎn)說明: 
由于微信小程序,整個(gè)項(xiàng)目編譯后的大小不能超過1M 

 
查看做輪播圖功能的一張圖片大小都已經(jīng)有100+k了 

那么我們可以把圖片放在服務(wù)器上,發(fā)送請(qǐng)求來獲取。

index.wxml: 
這里使用小程序提供的<swiper>組件 
autoplay:自動(dòng)播放 
interval:自動(dòng)切換時(shí)間 
duration:滑動(dòng)動(dòng)畫的時(shí)長(zhǎng) 
current:當(dāng)前所在的頁面 
bindchange:current 改變時(shí)會(huì)觸發(fā) change 事件 
swiper 的屬性 設(shè)置為 vertical="true" 即可上下滾動(dòng) 
由于<swiper>組件提供的指示點(diǎn)樣式比較單一,另外再自定義指示點(diǎn)的樣式



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18024.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢