微信小程序左右滑动的实现代码(轮播图之运用)

Dear 丶 2022-05-11 06:12 149阅读 0赞

这篇文章主要介绍了微信小程序左右滑动的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

**左滑 右滑 你不再是一个人**

无论你是一个程序猿还是一个程序媛，每天干的事除了coding还是coding，代码不能解决的问题（什么问题自己心里还没点abcd数嘛），探探能帮你解决。最近网上特流行一款交友软件叫探探（据说是yp软件）。作为探探曾经的一名从来只浏览图片但是没有yue过的资深玩家同时又是一位热爱前端的妹子，我决定要仿一下这个app。既然是寄几开发，那还不是寄几说了算，毫无疑问整款APP的主题风格被我改成我最爱的终极少女粉了hhh，下面让我们一起来感受下探探的魅力吧~

**项目整体效果**

![201712151523303.gif_20171115152738][]

**项目部分功能点解析**

主页图片左滑右滑对应按钮变化

![201712151523304.gif_2017111515260][]

首先我们来聊一下最让我头痛的地方，就是主页面的左右滑动事件并且对应按钮会相应变化，即我左滑一下图片下面的灰色按钮会有相应的动画效果，右滑则对应着图片下面的红色按钮。对于一个刚入小程序坑的妹子来说，没有大神指点不知道要在这里面的逻辑坑还要绕多久才能绕出来。得一高人指点，我才完美滴实现了这个功能。

这里写了三个大的盒子放着图片和文字信息,再将他们放到swiper-item里面，用swiper组件实现整个盒子的左右滑动

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;swiper class=</code><code>'swiper-item__content'</code> <code>current=</code><code>""</code> <code>bindchange=</code><code>"changeswiper"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;swiper-item class=</code><code>"swip"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;view class=</code><code>'page__bd_content'</code><code>&gt; </code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;image class=</code><code>"slide-image"</code> <code>src=</code><code>"<a href="http://pic.qqtn.com/up/2017-12/15126388387704237.jpg" rel="nofollow">http://pic.qqtn.com/up/2017-12/15126388387704237.jpg</a>"</code> <code>mode=</code><code>"scaleToFill"</code><code>/&gt; </code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"name"</code><code>&gt;K&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"age"</code><code>&gt;♂21&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"conste"</code><code>&gt;金牛座&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"status"</code><code>&gt;文化/教育&lt;/view&gt; </code> <code>&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;</code><code>&lt;/swiper-item&gt;</code> <code>&lt;/swiper&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

盒子下面不是按钮，我是放了两张图片。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;view class=</code><code>"page__ft"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;image class=</code><code>"notlike { {left?'active':''}}"</code> <code>src=</code><code>"../../images/notlike.png"</code> <code>/&gt;</code> <code>&nbsp;</code><code>&lt;image class=</code><code>"like { {right?'active':''}}"</code> <code>src=</code><code>"../../images/like.png"</code> <code>/&gt;</code> <code>&nbsp;</code><code>&lt;/view&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

先给他们写个滑动的时候触发的动画效果

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>.active { </code> <code>&nbsp;</code><code>animation: active 1s ease;</code><code>//定义一个叫做active的动画</code> <code>}</code> <code>@keyframes active { </code><code>//补充active动作脚本</code> <code>&nbsp;</code><code>0% { </code> <code>&nbsp;&nbsp;</code><code>transform: scale(0.8);</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>50% { </code> <code>&nbsp;&nbsp;</code><code>transform: scale(1.2);</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>100% { </code> <code>&nbsp;&nbsp;</code><code>transform: scale(1.0);</code> <code>&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

在page的data里面定义三个变量，将left,right变量绑定到对应图片中

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>data: { </code> <code>&nbsp;</code><code>left: </code><code>false</code> <code>,</code> <code>&nbsp;</code><code>right: </code><code>false</code><code>,</code> <code>&nbsp;</code><code>activeIndex: 0</code> <code>},</code> </td> 
 </tr> 
 </tbody> 
</table>

在swiper绑定事件中具体判断左右滑动事件

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>changeswiper: </code><code>function</code><code>(e) { </code> <code>&nbsp;</code><code>var</code> <code>index = e.detail.current;</code><code>//当前所在页面的 index</code> <code>&nbsp;</code><code>if</code><code>(index &gt; </code><code>this</code><code>.data.activeIndex) { </code><code>//左滑事件判断</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;</code><code>left: </code><code>true</code><code>//若为左滑，left值为true,触发图片动画效果</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;</code><code>} </code><code>else</code> <code>if</code><code>(index &lt; </code><code>this</code><code>.data.activeIndex) { </code><code>//右滑事件判断</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;</code><code>right: </code><code>true</code><code>//若为右滑，right值为true,触发图片动画效果</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>setTimeout(() =&gt; { </code><code>//每滑动一次，数据发生变化</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;</code><code>activeIndex: index,</code> <code>&nbsp;&nbsp;</code><code>left:</code><code>false</code><code>,</code> <code>&nbsp;&nbsp;</code><code>right:</code><code>false</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;</code><code>}, 1000);</code> <code>&nbsp;</code><code>},</code> </td> 
 </tr> 
 </tbody> 
</table>

**从本地上传图片**

![201712151523305.gif_20171115152852][]

这个呀查一查小程序开发文档就好了，先在要上传图片的地方的src绑定个数据变量

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;image class=</code><code>"addImg"</code> <code>src=</code><code>"{ {imgUrl}}"</code> <code>bindtap=</code><code>"uploadImg"</code> <code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

放入图片默认地址，就是上传图片之前的添加图片

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>data: { </code> <code>&nbsp;</code><code>imgUrl: </code><code>'../../images/addImg.png'</code> <code>&nbsp;</code><code>},</code> </td> 
 </tr> 
 </tbody> 
</table>

通过绑定tap事件将上传的图片地址替换进去

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>uploadImg: </code><code>function</code><code>(e) { </code> <code>var</code> <code>that = </code><code>this</code><code>;</code> <code>wx.chooseImage({ </code> <code>&nbsp;</code><code>count: 1, </code><code>//上传图片数量</code> <code>&nbsp;</code><code>sizeType: [</code><code>'original'</code><code>, </code><code>'compressed'</code><code>], </code><code>// 可以指定是原图还是压缩图，默认二者都有</code> <code>&nbsp;</code><code>sourceType: [</code><code>'album'</code><code>, </code><code>'camera'</code><code>], </code><code>// 可以指定来源是相册还是相机，默认二者都有</code> <code>&nbsp;</code><code>success: </code><code>function</code> <code>(res) { </code><code>// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>tempFilePaths = res.tempFilePaths;</code> <code>&nbsp;&nbsp;</code><code>that.setData({ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>imgUrl: tempFilePaths</code> <code>&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>wx.showToast({ </code><code>//显示上传成功</code> <code>&nbsp;&nbsp;&nbsp;</code><code>title: </code><code>'上传成功'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>icon: </code><code>'success'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>duration: 2000</code> <code>&nbsp;</code><code>})</code> <code>&nbsp;</code><code>}</code> <code>})，</code> </td> 
 </tr> 
 </tbody> 
</table>

配对成功列表据通过easy-mock获取后台数据

![201712151523316.gif_20171115152925][]

block wx:for渲染一个包含多节点的结构块

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>&lt;swiper-item&gt;</code> <code>&nbsp;</code><code>&lt;view class=</code><code>"swiper-item__content"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;block wx:</code><code>for</code><code>=</code><code>"{ {friendsList}}"</code> <code>wx:key=</code><code>"index"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"weui-tab__content"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"weui-media-box__hd"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;image src=</code><code>"{ {item.avatar}}"</code> <code>mode=</code><code>"aspectFit"</code><code>&gt;&lt;/image&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt; </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"weui-media-box__bd"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"weui-media-box__nickname"</code><code>&gt;{ {item.nickname}}&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;view class=</code><code>"weui-media-box__message"</code><code>&gt;{ {item.message}}&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;/view&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/block&gt;</code> <code>&nbsp;</code><code>&lt;/view&gt;</code> <code>&lt;/swiper-item&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

获取后台数据

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>wx.request({ </code> <code>&nbsp;&nbsp;</code><code>url: </code><code>'<a href="https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList" rel="nofollow">https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList</a>'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>success: (res) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>// console.log(response);</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.setData({ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>friendsList: res.data.data.friendsList</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

其它差不多就是切页面了，个人原因用不太习惯weui的官方样式，每个页面都是我自己呕心沥血码出来的，所以大家不喜轻点喷哈,还在努力学习当中~~~

原文地址：[https://www.jb51.net/article/130702.htm][https_www.jb51.net_article_130702.htm]

[201712151523303.gif_20171115152738]: https://files.jb51.net/file_images/article/201712/201712151523303.gif?20171115152738
[201712151523304.gif_2017111515260]: https://files.jb51.net/file_images/article/201712/201712151523304.gif?2017111515260
[Link 1]: https://www.jb51.net/article/130702.htm#
[201712151523305.gif_20171115152852]: https://files.jb51.net/file_images/article/201712/201712151523305.gif?20171115152852
[201712151523316.gif_20171115152925]: https://files.jb51.net/file_images/article/201712/201712151523316.gif?20171115152925
[https_www.jb51.net_article_130702.htm]: https://www.jb51.net/article/130702.htm