【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】javascript怎么才可以實(shí)現(xiàn)微信小程序左右滑動(dòng)功能

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】javascript怎么才可以實(shí)現(xiàn)微信小程序左右滑動(dòng)功能

這篇文章給大家分享的是有關(guān)javascript怎么才可以實(shí)現(xiàn)微信小程序左右滑動(dòng)功能的內(nèi)容。在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過(guò)來(lái)看看吧。項(xiàng)目整體效果項(xiàng)目部分功能點(diǎn)解析主頁(yè)圖片左滑右滑對(duì)應(yīng)按鈕變化首先我們來(lái)聊一下最讓我頭痛的地方，就是主頁(yè)面的左右滑動(dòng)事件并且對(duì)應(yīng)按鈕會(huì)相應(yīng)變化，即我左滑一下圖片下面的灰色按鈕會(huì)有相應(yīng)的動(dòng)畫效果，右滑則對(duì)應(yīng)著圖片下面的紅色按鈕。對(duì)于一個(gè)剛?cè)胄〕绦蚩拥拿米觼?lái)說(shuō)，沒(méi)有大神指點(diǎn)不知道要在這里面的邏輯坑還要繞多久才能繞出來(lái)。得一高人指點(diǎn)，我才完美滴實(shí)現(xiàn)了這個(gè)功能。這里寫了三個(gè)大的盒子放著圖片和文字信息,再將他們放到swiper-item里面，用swiper組件實(shí)現(xiàn)整個(gè)盒子的左右滑動(dòng)<swiper

class='swiper-item__content'

current=""

bindchange="changeswiper">

<swiper-item

class="swip">

<view

class='page__bd_content'>

<image

class="slide-image"

src="/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>先給他們寫個(gè)滑動(dòng)的時(shí)候觸發(fā)的動(dòng)畫效果.active

{

animation:

active

1s

ease;//定義一個(gè)叫做active的動(dòng)畫

}

@keyframes

active

{//補(bǔ)充active動(dòng)作腳本

0%

{

transform:

scale(0.8);

}

50%

{

transform:

scale(1.2);

}

100%

{

transform:

scale(1.0);

}

}在page的data里面定義三個(gè)變量，將left,right變量綁定到對(duì)應(yīng)圖片中data:

{

left:

false

,

right:

false,

activeIndex:

0

},在swiper綁定事件中具體判斷左右滑動(dòng)事件changeswiper:

function(e)

{

var

index

=

e.detail.current;//當(dāng)前所在頁(yè)面的

index

if(index

>

this.data.activeIndex)

{//左滑事件判斷

this.setData({

left:

true//若為左滑，left值為true,觸發(fā)圖片動(dòng)畫效果

})

}

else

if(index

<

this.data.activeIndex)

{//右滑事件判斷

this.setData({

right:

true//若為右滑，right值為true,觸發(fā)圖片動(dòng)畫效果

})

}

setTimeout(()

=>

{//每滑動(dòng)一次，數(shù)據(jù)發(fā)生變化

this.setData({

activeIndex:

index,

left:false,

right:false

})

},

1000);

},從本地上傳圖片這個(gè)呀查一查小程序開(kāi)發(fā)文檔就好了，先在要上傳圖片的地方的src綁定個(gè)數(shù)據(jù)變量<image

class="addImg"

src="{{imgUrl}}"

bindtap="uploadImg"

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

{

imgUrl:

'../../images/addImg.png'

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

function(e)

{

var

that

=

this;

wx.chooseImage({

count:

1,

//上傳圖片數(shù)量

sizeType:

['original',

'compressed'],

//

可以指定是原圖還是壓縮圖，默認(rèn)二者都有

sourceType:

['album',

'camera'],

//

可以指定來(lái)源是相冊(cè)還是相機(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

})

}

})，配對(duì)成功列表?yè)?jù)通過(guò)easy-mock獲取后臺(tái)數(shù)據(jù)blockwx:for渲染一個(gè)包含多節(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>獲取后臺(tái)數(shù)據(jù)wx.request({

url:

'/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList',

success:

(res)

=>

{

//

console.log(response);

this.setData({

friendsList:

res.data.data.friendsList

})

}

})其它差不多就是切頁(yè)面了，個(gè)人