微信小程序3D輪播實現(xiàn)代碼
更新時間:2019年09月19日 10:12:03 作者:執(zhí)著的小前端
這篇文章主要介紹了微信小程序3D輪播實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序3D輪播實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
代碼如下
<!-- 輪播圖 -->
<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,//當前swiper索引
imgList: [//圖片列表
'../../imgs/swiper1.jpg',
'../../imgs/swiper2.jpg',
'../../imgs/swiper3.jpg',
]
},
//獲取swiper高度
getHeight: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth - 2 * 50;//獲取當前屏幕的寬度
var imgh = e.detail.height;//圖片高度
var imgw = e.detail.width;
var sH = winWid * imgh / imgw + "px"
this.setData({
swiperH: sH//設置高度
})
},
//swiper滑動事件
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 () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
效果如下


以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript實現(xiàn)廣告的關閉與顯示效果實例
這篇文章主要介紹了JavaScript實現(xiàn)廣告的關閉與顯示效果,涉及javascript廣告窗口的關閉與顯示效果實現(xiàn)技巧,需要的朋友可以參考下2015-07-07
js獲取GridView中行數(shù)據(jù)的兩種方法 分享
這篇文章介紹了js獲取GridView中行數(shù)據(jù)的方法,有需要的朋友可以參考一下2013-07-07
JavaScript/TypeScript 實現(xiàn)并發(fā)請求控制的示例代碼
這篇文章主要介紹了JavaScript/TypeScript 實現(xiàn)并發(fā)請求控制,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01

