微信小程序左右滑动的实现代码


Posted in Javascript onDecember 15, 2017

左滑 右滑 你不再是一个人

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

项目整体效果

微信小程序左右滑动的实现代码

项目部分功能点解析

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

微信小程序左右滑动的实现代码

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

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

<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>

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

.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变量绑定到对应图片中

data: {
 left: false ,
 right: false,
 activeIndex: 0
},

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

changeswiper: function(e) {
 var index = e.detail.current;//当前所在页面的 index
 if(index > this.data.activeIndex) {//左滑事件判断
  this.setData({
  left: true//若为左滑,left值为true,触发图片动画效果
  })
 } else if(index < this.data.activeIndex) {//右滑事件判断
  this.setData({
  right: true//若为右滑,right值为true,触发图片动画效果
  })
 }
 setTimeout(() => {//每滑动一次,数据发生变化
  this.setData({
  activeIndex: index,
  left:false,
  right:false
  })
 }, 1000);
 },

从本地上传图片

微信小程序左右滑动的实现代码

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

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

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

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

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

uploadImg: function(e) {
var that = this;
wx.chooseImage({
 count: 1, //上传图片数量
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths;
  that.setData({
   imgUrl: tempFilePaths
 })
  wx.showToast({//显示上传成功
   title: '上传成功',
   icon: 'success',
   duration: 2000
 })
 }
}),

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

微信小程序左右滑动的实现代码

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

<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>

获取后台数据

wx.request({
  url: 'https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList',
  success: (res) => {
  // console.log(response);
  this.setData({
   friendsList: res.data.data.friendsList
  })
  }
 })

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

总结

以上所述是小编给大家介绍的微信小程序左右滑动的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中的布尔运算符使用介绍
Nov 20 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 #Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 #Javascript
微信小程序使用request网络请求操作实例
Dec 15 #Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 #Javascript
Angular中管道操作符(|)的使用方法
Dec 15 #Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 #Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 #Javascript
You might like
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php下载文件的代码示例
2012/06/29 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
vuex实现简易计数器
2016/10/27 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
波兰在线运动商店:YesSport
2020/07/23 全球购物
对孩子的寄语
2014/04/09 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
期末个人总结范文
2015/02/13 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
企业安全生产检查制度
2015/08/06 职场文书
python 模块重载的五种方法
2021/04/24 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫