微信小程序左右滑動的實(shí)現(xiàn)代碼

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:23:41

微信小程序左右滑動的實(shí)現(xiàn)代碼

微信小程序左右滑動的實(shí)現(xiàn)代碼:左滑右滑你不再是一個人無論你是一個程序猿還是一個程序媛，每天干的事除了coding還是coding，代碼不能解決的問題（什么問題自己心里還沒點(diǎn)abcd數(shù)嘛），探探能幫你解決。最近網(wǎng)上特流行一款交友軟件叫探探（據(jù)說是yp軟件）。作為探探曾經(jīng)的一名從來只瀏覽

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序左右滑動的實(shí)現(xiàn)代碼:左滑右滑你不再是一個人無論你是一個程序猿還是一個程序媛，每天干的事除了coding還是coding，代碼不能解決的問題（什么問題自己心里還沒點(diǎn)abcd數(shù)嘛），探探能幫你解決。最近網(wǎng)上特流行一款交友軟件叫探探（據(jù)說是yp軟件）。作為探探曾經(jīng)的一名從來只瀏覽

左滑右滑你不再是一個人

無論你是一個程序猿還是一個程序媛，每天干的事除了coding還是coding，代碼不能解決的問題（什么問題自己心里還沒點(diǎn)abcd數(shù)嘛），探探能幫你解決。最近網(wǎng)上特流行一款交友軟件叫探探（據(jù)說是yp軟件）。作為探探曾經(jīng)的一名從來只瀏覽圖片但是沒有yue過的資深玩家同時又是一位熱愛前端的妹子，我決定要仿一下這個app。既然是寄幾開發(fā)，那還不是寄幾說了算，毫無疑問整款A(yù)PP的主題風(fēng)格被我改成我最愛的終極少女粉了hhh，下面讓我們一起來感受下探探的魅力吧~

項(xiàng)目整體效果

項(xiàng)目部分功能點(diǎn)解析

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

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

這里寫了三個大的盒子放著圖片和文字信息,再將他們放到swiper-item里面，用swiper組件實(shí)現(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 {//補(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ù)變量

<image class="addImg" src="{{imgUrl}}" bindtap="uploadImg" />

放入圖片默認(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é)點(diǎn)的結(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
 })
 }
 })

其它差不多就是切頁面了，個人原因用不太習(xí)慣weui的官方樣式，每個頁面都是我自己嘔心瀝血碼出來的，所以大家不喜輕點(diǎn)噴哈,還在努力學(xué)習(xí)當(dāng)中~~~

總結(jié)

以上所述是小編給大家介紹的微信小程序左右滑動的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com