国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

微信小程序實現banner圖輪播效果

來源:懂視網 責編:小OO 時間:2020-11-27 22:00:55
文檔

微信小程序實現banner圖輪播效果

本文實例為大家分享了微信小程序實現banner圖輪播的具體代碼,供大家參考,具體內容如下:效果圖。indicator-active-color="#007aff"http://修改選中圖片圓點的顏色。js。
推薦度:
導讀本文實例為大家分享了微信小程序實現banner圖輪播的具體代碼,供大家參考,具體內容如下:效果圖。indicator-active-color="#007aff"http://修改選中圖片圓點的顏色。js。

本文實例為大家分享了微信小程序實現banner圖輪播的具體代碼,供大家參考,具體內容如下

效果圖:

indicator-active-color="#007aff"http://修改選中圖片圓點的顏色

js:

const app = getApp()
 
Page({
 data: {
 //-----------模擬banner圖-----------
 imgUrls: [
 '/image/1545118381903.jpg',
 '/image/1545118566631.jpg'
 ],
 circular: true,
 //是否顯示畫板指示點 
 indicatorDots: true,
 //選中點的顏色 
 //是否豎直 
 vertical: false,
 //是否自動切換 
 autoplay: true,
 //自動切換的間隔
 interval: 3000,
 //滑動動畫時長毫秒 
 duration: 1000,
 //所有圖片的高度 
 imgheights: [],
 //圖片寬度 
 imgwidth: 750,
 //默認 
 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 })
 },
 }
})

wxml:

<!-------------首頁輪播圖----------------- -->
<view class='swiper'>
 <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
 <block wx:for='{{imgUrls}}' wx:key="{{index}}">
 <swiper-item>
 <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" />
 </swiper-item>
 </block>
 </swiper>
</view>

wxss:

.swiper image {
 width: 100%;
 height: auto;
}
 
.swiper-image {
 height: 100%;
 width: 100%;
}
 
.slide-image {
 height: 100%;
 width: 100%;
 display: block;
}

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

微信小程序實現banner圖輪播效果

本文實例為大家分享了微信小程序實現banner圖輪播的具體代碼,供大家參考,具體內容如下:效果圖。indicator-active-color="#007aff"http://修改選中圖片圓點的顏色。js。
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 毛片一级免费 | 国产成人精品影视 | 在线99视频 | 成人精品第一区二区三区 | 在线观看黄a大片爽爽影院免费 | 在线另类| 国产一级视频 | 午夜国产精品视频 | 国产高清在线免费视频 | 国产在线精选免费视频8x | 欧美爱爱网站 | 久久久久久久久久久9精品视频 | 一级网站在线观看 | 亚洲视频欧洲视频 | 免费看黄色毛片 | 国产一区二区三区在线视频 | 日韩视频亚洲 | 国产一区二区福利 | 91精品一区二区三区久久久久 | 日本一二区视频 | 国产精品久久久久久久9999 | 韩日免费视频 | 一级毛片黄 | 中文字幕一区二区三区不卡 | 欧美日韩国产一区 | 插欧美| 性夜影院爽黄a爽免费看网站 | 一级一级一级毛片免费毛片 | 亚洲成人一区 | 精品久久久久久综合日本 | 香港经典a毛片免费观看…伊人色综合久久 | 美女一级a毛片免费观看 | 欧美精品第一区 | 国产成人精品三级在线 | 国产成人精品日本亚洲语音2 | 欧美日韩不卡视频一区二区三区 | 中国亲与子乱αy | 91伊人国产| 亚洲国产成人久久综合碰 | 美女a毛片 | 日韩av线上 |