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


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 split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
PHP7新增函数
2021/03/09 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
查看Django和flask版本的方法
2018/05/14 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
宿舍标语大全
2014/06/19 职场文书
爱护草坪标语
2014/06/24 职场文书
检讨书格式
2019/04/25 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
MySQL系列之十一 日志记录
2021/07/02 MySQL
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
Java实现带图形界面的聊天程序
2022/06/10 Java/Android