這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何實現(xiàn)左右滑動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是專業(yè)的大豐網(wǎng)站建設(shè)公司，大豐接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行大豐網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

項目整體效果

項目部分功能點解析

主頁圖片左滑右滑對應(yīng)按鈕變化

首先我們來聊一下最讓我頭痛的地方，就是主頁面的左右滑動事件并且對應(yīng)按鈕會相應(yīng)變化，即我左滑一下圖片下面的灰色按鈕會有相應(yīng)的動畫效果，右滑則對應(yīng)著圖片下面的紅色按鈕。對于一個剛?cè)胄〕绦蚩拥拿米觼碚f，沒有大神指點不知道要在這里面的邏輯坑還要繞多久才能繞出來。得一高人指點，我才完美滴實現(xiàn)了這個功能。

這里寫了三個大的盒子放著圖片和文字信息,再將他們放到swiper-item里面，用swiper組件實現(xiàn)整個盒子的左右滑動

 
   
    
   K
   ♂21
   金牛座
   文化/教育 
  
 

盒子下面不是按鈕，我是放了兩張圖片。

先給他們寫個滑動的時候觸發(fā)的動畫效果

.active {
 animation: active 1s ease;//定義一個叫做active的動畫
}
@keyframes active {//補(bǔ)充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ù)變量

放入圖片默認(rèn)地址，就是上傳圖片之前的添加圖片

data: {
 imgUrl: '../../images/addImg.png'
 },

通過綁定tap事件將上傳的圖片地址替換進(jìn)去

uploadImg: function(e) {
var that = this;
wx.chooseImage({
 count: 1, //上傳圖片數(shù)量
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(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)塊

 
  
   
    
     
     
    
     {{item.nickname}}
     {{item.message}}
    
   
  
 

獲取后臺數(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)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：微信小程序如何實現(xiàn)左右滑動-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/cdhjsg.html