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


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 相关文章推荐
列表内容的选择
Jun 30 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
原生JS运动实现轮播图
Jan 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
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python常用类型转换实现代码实例
2020/07/28 Python
python3排序的实例方法
2020/10/20 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
Jar包的作用是什么
2014/03/30 面试题
体育馆的标语
2014/06/24 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
vue+springboot实现登录验证码
2021/05/27 Vue.js
HTML基础详解(下)
2021/10/16 HTML / CSS
redis缓存存储Session原理机制
2021/11/20 Redis
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS