這篇文章給大家介紹如何在微信小程序中實(shí)現(xiàn)一個3D輪播圖效果,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供新晃網(wǎng)站建設(shè)、新晃做網(wǎng)站、新晃網(wǎng)站設(shè)計、新晃網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、新晃企業(yè)網(wǎng)站模板建站服務(wù),10多年新晃做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
index.html
<view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' bindtouchstart='start' bindtouchend='end'> <block wx:for='{{swiperList}}'> <image class='imgBasic {{index === 0 ? "" : "fold"}} {{item.active ? item.swpClass : ""}}' src='{{item.imgsrc}}' data-index='{{index}}'></image> </block> </view> <view class='dots'> <block wx:for='{{swiperList}}' wx:key='unique'> <view data-i='{{index}}' bindtap='fn' class='dot {{index === currentImageIndex ? "active" : ""}}'></view> </block> </view> </view> </view>
index.css:
.stage{ perspective: 3000rpx; perspective-origin: 50% 50%; border: 2rpx solid rgba(0, 0, 0, 0.5); padding: 20rpx 28rpx; background: rgba(255, 255, 255,0.8); height: 520rpx; } .wrapper{ height:480rpx; margin-top: 20rpx; transform-style: preserve-3d; position: relative; } .imgBasic{ position: absolute; width:480rpx; height:480rpx; border-radius:10rpx; border: 7rpx solid #fff; } image:nth-child(1){ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } image:nth-child(2){ left: 260rpx; } image:nth-child(3){ left: 320rpx; } image:nth-child(4){ left: 380rpx; } .fold{ transform: rotateY(-80deg) scale3d(1,0.85,1) translateZ(-10%); -webkit-transform: rotateY(-80deg) scale3d(1,0.85,1); background: rgba(255, 255, 255,0.8); } .swiper-con{ height: 520rpx; } .scrollCon{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: nowrap; background: red; } .itemParent{ position: relative; width: 100%; height: 1000rpx; } .item{ width: 100rpx; float: left; height: 100rpx; } .item-con{ height:500rpx; } swiper-item{ width:480rpx; height:480rpx; } .idx-content { perspective: 1500; } .idx-content .idx-swiper { position: relative; margin: 40rpx 0; padding-bottom: 100%; transform-style: preserve-3d; } .idx-content .idx-swiper .idx-cswp { width: 70%; height: 100%; position: absolute; transform-style: preserve-3d; top: 0; border-radius: 6px; } .idx-content .idx-swiper .idx-cswp image { width: 100%; max-height: 600rpx; } .idx-content .idx-swiper .idx-cswp .swp-title .swp-btime { text-align: center; font-size: 28rpx; } .idx-content .idx-swiper .idx-cswp .swp-title .swp-bname { text-align: center; font-size: 24rpx; } /* 右邊的圖片展開動畫效果 */ @keyframes rotateImage{ from{ transform:rotateY(-80deg); -webkit-transform:rotateY(-80deg); left: 250rpx; } to{ transform: rotateY(0deg) scale3d(1,1,1); -webkit-transform: rotateY(0deg) scale3d(1,1,1); left: 0rpx; } } @keyframes backRotateImage{ from{ transform: roateteY(0deg) scale3d(1,1,1); -webkit-animation: rotateY(0deg) scale3d(1,1,1); filter: contrast(100%) brightness(100%); } to{ transform: rotateY(280deg) scale3d(1,0.85,1); -webkit-animation: rotateY(280deg) scale3d(1,0.85,1); left: 210rpx; } } @keyframes leftMoveAnimation{ from{ /* transform:translateX(-300rpx); */ /* left: 260rpx; */ }to{ transform:translateX(-40%) scale3d(1,0.85,1) rotateY(-80deg); -webkit-transform:translateX(-40%) scale3d(1,0.85,1) rotateY(-80deg); } } @keyframes leftMove2Animation{ from{ }to{ transform:translateX(-35%) scale3d(1,0.85,1) rotateY(-80deg); -webkit-transform:translateX(-35%) scale3d(1,0.85,1) rotateY(-80deg); } } /* 功能介紹:向左邊展開,放大,位移操作 */ .swp-left { animation: rotateImage 1s normal; -webkit-animation: rotateImage 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } /* 功能介紹:單獨(dú)從左側(cè)位移到屏幕的最后側(cè)位置并且播放折疊動畫 */ .swp-right { animation: backRotateImage 1s normal; -webkit-animation: backRotateImage 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } /* 右邊的動畫依次向左移動,放大,旋轉(zhuǎn)操作 */ .move-left1{ transform:rotateY(-80deg) scale3d(1,0.85,1); animation: leftMoveAnimation 1s normal; -webkit-animation: leftMoveAnimation 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } .move-left2{ transform:rotateY(-80deg) scale3d(1,0.85,1); animation: leftMove2Animation 1s normal; -webkit-animation: leftMove2Animation 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } .dots{ display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; margin: 0 8rpx; position: absolute; left: 0rpx; right: 0rpx; bottom: 15rpx; } .dot{ margin: 0 8rpx; height: 15rpx; width: 15rpx; background: #da91f5; border-radius: 15rpx; } .active{ width: 40rpx; height: 15rpx; border-radius: 15rpx; }
控制層index.js:
// pages/lck/testJing/perfact.js let app = getApp(); Page({ /** * 頁面的初始數(shù)據(jù) */ data: { host: app.host, dkheight: 300, dkcontent: `你好<br/>nihao,<br/><br/><br/><br/><br/><br/><br/>這個是測試<br/><br/>你同意了嗎<br/><br/><br/>hehe<b class='nihao'>n你好啊,我加粗了kk</b > <p><img src='http://shop.ykplay.com/upload/1/App.ico'/><strong>asdfasdfasd</strong></p>`, typeValue: null, showRightToast: false, changeImg: false, show: true, swiperList: [ { index: 0, aurl: "../start/start", swpClass: "swp-left", active: false, imgsrc: "../../resources/test.png", }, { index: 1, aurl: "#", swpClass: "swp-right", active: false, imgsrc: "../../resources/800.jpg" }, { index: 2, aurl: "#", swpClass: "swp-right", active: false, imgsrc: "../../resources/900.jpg" }, { index: 3, aurl: "#", swpClass: "swp-right", active: false, imgsrc: "../../resources/1000.jpg" }], played: false, //滑動觸點(diǎn)開始的時候 startPoint: 0, currentImageIndex: 0 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { this.data.typeValue = {}; this.data.typeValue.size = 'M'; this.data.typeValue.color = 'red'; console.log("typeValue is ", this.data.typeValue); this.setData({ typeValue: this.data.typeValue }) let winPage = this; wx.getSystemInfo({ success: function (res) { let winHeight = res.windowHeight; console.log(winHeight); winPage.setData({ dkheight: winHeight - winHeight * 0.05 - 80 }) } }) wxParse.wxParse('dkcontent', 'html', this.data.dkcontent, this, 5); }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { // wx.hideLoading(); }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }, previewImage: function (e) { var that = this, //獲取當(dāng)前圖片的下表 index = e.currentTarget.dataset.index, //數(shù)據(jù)源 pictures = this.data.pictures; wx.previewImage({ //當(dāng)前顯示下表 current: pictures[index], //數(shù)據(jù)源 urls: pictures }) }, onShareAppMessage: function (ops) { }, show: function (event) { this.setData({ show: true }) }, back: function () { this.setData({ show: false }) }, //顯示求換按鈕 swpBtn: function (event) { let swp = this.data.swiperList; let max = swp.length; let dataSet = event.currentTarget.dataset; let idx = dataSet.index; console.log("idx is ", idx); let prev = swp[idx - 1]; let curView = swp[idx]; let next = swp[idx + 1]; console.log("prev is ", prev); console.log("curView is ", curView); for (let j = 0; j < max; j++) { swp[j].active = true; } if (idx == 1 && prev && next) { prev.swpClass = 'swp-right'; curView.swpClass = 'swp-left'; console.log("curView.index is ", curView.index); for (let i = 2; i < max; i++) { if (i === 2) { swp[i].swpClass = 'move-left1'; } else if (i === 3) { swp[i].swpClass = 'move-left2'; } } let self = this; this.setData({ swiperList: swp }, () => { console.log("外層的setData被調(diào)用"); //將數(shù)組中的第一個元素刪除放到最后的位置 let first = swp.shift(); swp.push(first); console.log("swp is ", swp); self.data.swiperList = swp; self.setData({ swiperList: swp }, () => { console.log("最內(nèi)層的setData被調(diào)用"); }) }) } }, start: function (e) { console.log("e is ", e); this.data.startPoint = e.changedTouches[0].pageX; console.log("startPoint is ", this.data.startPoint); }, end: function (e) { let isLeft = false; let isRight = false; console.log("e is ", e); console.log("endPoint is ", e.changedTouches[0].pageX); let endPoint = e.changedTouches[0].pageX; console.log("是否向左移動?", (endPoint - this.data.startPoint) < 0 ? (isLeft = true) : (isRight = true)); console.log("isLeft is ", isLeft); console.log("isRight is ", isRight); //如果向左移動的話執(zhí)行相應(yīng)方法 if (isLeft) { this.moveLeft(1); } else { // this.moveRight(); } }, moveLeft: function (idx) { if (idx === 1) { let swp = this.data.swiperList; let max = swp.length; let prev = swp[idx - 1]; let curView = swp[1]; let next = swp[idx + 1]; console.log("prev is ", prev); console.log("curView is ", curView); for (let j = 0; j < max; j++) { swp[j].active = true; } if (prev && next) { prev.swpClass = 'swp-right'; curView.swpClass = 'swp-left'; console.log("curView.index is ", curView.index); // this.data.currentImageIndex = curView.index; this.setData({ currentImageIndex: curView.index }) for (let i = 2; i < max; i++) { if (i === 2) { swp[i].swpClass = 'move-left1'; } else if (i === 3) { swp[i].swpClass = 'move-left2'; } } let self = this; this.setData({ swiperList: swp }, () => { console.log("外層的setData被調(diào)用"); //將數(shù)組中的第一個元素刪除放到最后的位置 let first = swp.shift(); swp.push(first); console.log("swp is ", swp); self.data.swiperList = swp; self.setData({ swiperList: swp }, () => { console.log("最內(nèi)層的setData被調(diào)用"); }) }) } } }, icon: function (e) { console.log("e is ", e); } })
關(guān)于如何在微信小程序中實(shí)現(xiàn)一個3D輪播圖效果就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
網(wǎng)頁題目:如何在微信小程序中實(shí)現(xiàn)一個3D輪播圖效果
網(wǎng)址分享:http://muchs.cn/article14/jpisde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、網(wǎng)站策劃、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、電子商務(wù)、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)