1、微信小程序開發頁面頂部導航欄制作設計 [圖]
2、微信小程序開發底部導航菜單欄的制作設計 [圖]
3、微信小程序開發廣告輪播幻燈圖制作設計 [圖]
4、微信小程序開發商城電商首頁整體布局制作設計 [圖]
5、微信小程序開發分類頁面柵格布局制作與設計 [圖]
6、微信小程序開發商品詳情頁中sku的彈出屬性篩選選擇框 [圖]
7、微信小程序商品正文詳情頁整體布局制作與設計 [圖]
8、微信小程序商城電商購物車頁面制作與設計 [圖]
9、微信小程序商城電商個人會員中心頁面制作設計 [圖]
在做小程序頁面廣告輪播幻燈圖時候先需要了解微信小程序提供我們這個 一些用法。
微信自帶提供這個插件的常用屬性
-dots 是否顯示面板指示點
是否自動切換
自動切換時間間隔
滑動動畫時長
先看看做好以后達到效果是如何的：
1、樣式文件代碼：
/* 直接設置swiper屬性 */
swiper {
height: 300rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}
2、js數據調用文件
// banner
imgUrls: [
'http://mz.djmall.xmisp.cn/files/banner/20161219/148211980641.png',
'http://mz.djmall.xmisp.cn/files/banner/20161222/148238831285.png',
'http://mz.djmall.xmisp.cn/files/banner/20161222/14823895573.png'
],
indicatorDots: true, //是否顯示面板指示點
autoplay: true, //是否自動切換
interval: 3000, //自動切換時間間隔,3s
duration: 1000, // 滑動動畫時長1s
3、頁面調用輪播幻燈代碼：
模板簡介：該模板名稱為【微信小程序開發廣告輪播幻燈圖制作設計】，大小是小程序廣告圖片，文檔格式為.小程序廣告圖片，推薦使用打開，作品中的圖片，文字等數據均可修改，圖片請在作品中選中圖片替換即可，文字修改直接點擊文字修改即可，您也可以新增或修改作品中的內容，該模板來自用戶分享，如有侵權行為請聯系網站客服處理。歡迎來懶人模板【小程序教程】欄目查找您需要的精美模板。
相關搜索