微信小程序3D輪播實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序3D輪播實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(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({ /** * 頁(yè)面的初始數(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)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { } })
效果如下
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解JavaScript的內(nèi)存空間、賦值和深淺拷貝
這篇文章主要介紹了JavaScript的內(nèi)存空間、賦值和深淺拷貝,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果
這篇文章主要介紹了基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-07-07JS密碼生成與強(qiáng)度檢測(cè)完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了JS密碼生成與強(qiáng)度檢測(cè)完整實(shí)例,涉及JavaScript密碼的生成,破解時(shí)間計(jì)算,密碼安全監(jiān)測(cè)及大小寫(xiě)鎖定判斷等功能的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04js獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05JavaScript中的property和attribute介紹
JavaScript中的property和attribute介紹,需要的朋友可以參考下。2011-12-12JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【矩形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了游戲算法中針對(duì)碰撞檢測(cè)的包盒矩形情況下的相關(guān)算法原理與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12