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


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 相关文章推荐
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
vue.js路由跳转详解
Aug 28 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
微信小程序反编译的实现
Dec 10 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生成html文件方法总结
2014/12/01 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
利用Python如何生成随机密码
2016/04/20 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
python复合条件下的字典排序
2020/12/18 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
成教自我鉴定
2013/10/27 职场文书
校园十大歌手策划书
2014/02/01 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
党员自我评价范文2015
2015/03/03 职场文书
小学教育见习总结
2015/06/23 职场文书
《西门豹》教学反思
2016/02/23 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers