Tips:微信小程序可以在HbuilderX用HTML標簽(如Ddiv、span等)寫前端代碼,也可以用微信小程序語法寫(view、swiper標簽),然后npm run dev編譯后,在微信開發(fā)者工具里面導入該項目,就可以調試項目,查看效果。
成都創(chuàng)新互聯企業(yè)建站,十多年網站建設經驗,專注于網站建設技術,精于網頁設計,有多年建站和網站代運營經驗,設計師為客戶打造網絡企業(yè)風格,提供周到的建站售前咨詢和貼心的售后服務。對于成都網站制作、成都做網站中不同領域進行深入了解和探索,創(chuàng)新互聯在網站建設中充分了解客戶行業(yè)的需求,以靈動的思維在網頁中充分展現,通過對客戶行業(yè)精準市場調研,為客戶提供的解決方案。效果圖:
微信小程序實現輪播圖,本例是在*.wpy頁面開發(fā)(該頁面的temlate內容對應小程序的wxml,style樣式對應小程序的wxss,script對應小程序的js文件,config對應小程序的json文件)
<style type="less" scoped="scoped"> .swiper image { width: 100%; height: auto; } .swiper-image { height: 100%; width: 100%; } .slide-image { height: 100%; width: 100%; display: block; } </style> <template> <view class="swiper"> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" > <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image"> <swiper-item> <image src="{{image.img}}" data-id="{{index}}" class="slide-image" mode="widthFix" bindload="imageLoad" /> </swiper-item> </block> </swiper> </view> </template> <script> import wepy from '@wepy/core' wepy.page({ data: { circular: true, //是否顯示畫板指示點,根據圖片數量自動生成多少個圓點 indicatorDots: true, //選中點的顏色 //是否豎直 vertical: false, //是否自動切換 autoplay: true, //自動切換的間隔 interval: 3000, //滑動動畫時長毫秒 duration: 1000, //所有圖片的高度 imgheights: [], //圖片寬度 imgwidth: 320, //默認 current: 0 }, imageLoad: function(e) { //獲取圖片真實寬度 var imgwidth = e.detail.width, imgheight = e.detail.height, //寬高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //計算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一張圖片的對應的高度記錄到數組里 imgheights[e.target.dataset.id] = imgheight; this.setData({ imgheights: imgheights }) }, bindchange: function(e) { // console.log(e.detail.current) this.setData({ current: e.detail.current }) } }) </script>
標題名稱:超簡單的微信小程序輪播圖-創(chuàng)新互聯
文章源于:http://bm7419.com/article30/igjso.html
成都網站建設公司_創(chuàng)新互聯,為您提供自適應網站、定制開發(fā)、外貿網站建設、商城網站、微信公眾號、關鍵詞優(yōu)化
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯