溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序3D輪播實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-09-02 19:30:14 來源：腳本之家 閱讀：143 作者：執(zhí)著的小前端 欄目：web開發(fā)

這篇文章主要介紹了微信小程序3D輪播實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

代碼如下

<!-- 輪播圖 -->
<swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'>
　　<swiper-item wx:for='{{imgList}}' wx:key=''>
　　　　<image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
　　</swiper-item>
</swiper>
<!-- 輪播圖end -->
swiper {
  padding-top: 30px;
}
.le-img {
  width: 100%;
  display: block;
  transform: scale(0.8);
  transition: all 0.3s ease;
  border-radius: 6px;
}
.le-img.le-active {
  transform: scale(1);
}
// pages/swiper/swiper.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
　　swiperH: '',//swiper高度
　　nowIdx: 0,//當(dāng)前swiper索引
　　imgList: [//圖片列表
　　　　'../../imgs/swiper1.jpg',
　　　　'../../imgs/swiper2.jpg',
　　　　'../../imgs/swiper3.jpg',
　　]
},
//獲取swiper高度
getHeight: function (e) {
　　var winWid = wx.getSystemInfoSync().windowWidth - 2 * 50;//獲取當(dāng)前屏幕的寬度
　　var imgh = e.detail.height;//圖片高度
　　var imgw = e.detail.width;
　　var sH = winWid * imgh / imgw + "px"
　　this.setData({
　　　　swiperH: sH//設(shè)置高度
　　})
},
//swiper滑動(dòng)事件
swiperChange: function (e) {
　　this.setData({
　　　　nowIdx: e.detail.current
　　})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})

效果如下

微信小程序3D輪播實(shí)現(xiàn)代碼

微信小程序3D輪播實(shí)現(xiàn)代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手