您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序怎么實現(xiàn)左右滑動的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇微信小程序怎么實現(xiàn)左右滑動文章都會有所收獲,下面我們一起來看看吧。
項目整體效果
項目部分功能點解析
主頁圖片左滑右滑對應(yīng)按鈕變化
首先我們來聊一下最讓我頭痛的地方,就是主頁面的左右滑動事件并且對應(yīng)按鈕會相應(yīng)變化,即我左滑一下圖片下面的灰色按鈕會有相應(yīng)的動畫效果,右滑則對應(yīng)著圖片下面的紅色按鈕。對于一個剛?cè)胄〕绦蚩拥拿米觼碚f,沒有大神指點不知道要在這里面的邏輯坑還要繞多久才能繞出來。得一高人指點,我才完美滴實現(xiàn)了這個功能。
這里寫了三個大的盒子放著圖片和文字信息,再將他們放到swiper-item里面,用swiper組件實現(xiàn)整個盒子的左右滑動
<swiper class='swiper-item__content' current="" bindchange="changeswiper"> <swiper-item class="swip"> <view class='page__bd_content'> <image class="slide-image" src="http://pic.qqtn.com/up/2017-12/15126388387704237.jpg" mode="scaleToFill"/> <view class="name">K</view> <view class="age">♂21</view> <view class="conste">金牛座</view> <view class="status">文化/教育</view> </view> </swiper-item> </swiper>
盒子下面不是按鈕,我是放了兩張圖片。
<view class="page__ft"> <image class="notlike {{left?'active':''}}" src="../../images/notlike.png" /> <image class="like {{right?'active':''}}" src="../../images/like.png" /> </view>
先給他們寫個滑動的時候觸發(fā)的動畫效果
.active { animation: active 1s ease;//定義一個叫做active的動畫 } @keyframes active {//補充active動作腳本 0% { transform: scale(0.8); } 50% { transform: scale(1.2); } 100% { transform: scale(1.0); } }
在page的data里面定義三個變量,將left,right變量綁定到對應(yīng)圖片中
data: { left: false , right: false, activeIndex: 0 },
在swiper綁定事件中具體判斷左右滑動事件
changeswiper: function(e) { var index = e.detail.current;//當(dāng)前所在頁面的 index if(index > this.data.activeIndex) {//左滑事件判斷 this.setData({ left: true//若為左滑,left值為true,觸發(fā)圖片動畫效果 }) } else if(index < this.data.activeIndex) {//右滑事件判斷 this.setData({ right: true//若為右滑,right值為true,觸發(fā)圖片動畫效果 }) } setTimeout(() => {//每滑動一次,數(shù)據(jù)發(fā)生變化 this.setData({ activeIndex: index, left:false, right:false }) }, 1000); },
從本地上傳圖片
這個呀查一查小程序開發(fā)文檔就好了,先在要上傳圖片的地方的src綁定個數(shù)據(jù)變量
<image class="addImg" src="{{imgUrl}}" bindtap="uploadImg" />
放入圖片默認(rèn)地址,就是上傳圖片之前的添加圖片
data: { imgUrl: '../../images/addImg.png' },
通過綁定tap事件將上傳的圖片地址替換進去
uploadImg: function(e) { var that = this; wx.chooseImage({ count: 1, //上傳圖片數(shù)量 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認(rèn)二者都有 success: function (res) {// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; that.setData({ imgUrl: tempFilePaths }) wx.showToast({//顯示上傳成功 title: '上傳成功', icon: 'success', duration: 2000 }) } }),
配對成功列表據(jù)通過easy-mock獲取后臺數(shù)據(jù)
block wx:for渲染一個包含多節(jié)點的結(jié)構(gòu)塊
<swiper-item> <view class="swiper-item__content"> <block wx:for="{{friendsList}}" wx:key="index"> <view class="weui-tab__content"> <view class="weui-media-box__hd"> <image src="{{item.avatar}}" mode="aspectFit"></image> </view> <view class="weui-media-box__bd"> <view class="weui-media-box__nickname">{{item.nickname}}</view> <view class="weui-media-box__message">{{item.message}}</view> </view> </view> </block> </view> </swiper-item>
獲取后臺數(shù)據(jù)
wx.request({ url: 'https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList', success: (res) => { // console.log(response); this.setData({ friendsList: res.data.data.friendsList }) } })
關(guān)于“微信小程序怎么實現(xiàn)左右滑動”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“微信小程序怎么實現(xiàn)左右滑動”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。