微信小程序 bnner滾動實例詳解

微信小程序 bnner滾動

首先是輪播圖，autoplay 自動播放，interval 輪播的時間，duration 切換速度，可以根據自己需求去添加。

Delete：是刪除按鈕，加載進來是隱藏的，需用戶點輪播圖進去後，輪播圖全屏顯示才出來。

noClickImg 與 ClickImg：切換全屏與非全屏輪播圖，綁定了點擊事件 changeClick 來切換，只是改變樣式即可。

Block：圖片列表。

Number_img：當前輪播 index（currentNumber），與圖片 length 集合（cardnum）。其中 currentNumber：

//輪播圖發生改變時改變數字

//初始化數據

Data:{

currentNumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

currentNumber:number+1

})

},

 圖片你自己可以用vx:for,這個只實現靜態滾動 ；

這裡可以看到全屏狀態下當關閉按鈕被點擊後 getBackStyle，把 changeClick 切換到 imgFullScrenn 待命。

index.js新增：

詳情頁可以看到信息基本都是樣式一樣，可以使用微信提供的循環 block。

  上面寫的不好的地方，請各位愛好者多多指導，有更好的效果請多多指導。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！