微信小程序实现滑动操作代码


Posted in Javascript onApril 23, 2020

前言

本文使用动画组件wx.createAnimation来实现滑动操作:

1. 左滑动显示操作项区域;

2. 点击操作项触发相应方法;

3. 右滑动和点击行收起操作项;

4. 点击“删除”并确定则删除该条数据。

最终效果如下:

微信小程序实现滑动操作代码

实现过程

1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;

Tips:“详情”、“取号”和“删除”点击触发使用catchtap,阻止冒泡事件向上冒泡;

<view class="wrapper">
 <view class="container">
  <view class="list">
   <view class="line" bindtouchstart="touchstartX" bindtap="resetX" bindtouchmove="touchmoveX" bindtouchend="touchendX" animation="{{currentIndex === index ?animation : ''}}" data-index="{{index}}" wx:for="{{recordList}}" wx:key="id">
    <image class="icon-title" src="../../images/start_icon.png"></image>
    <view class="mes">
     <view class="title">{{item.title}}</view>
     <view class="date">预约时间:{{item.date}}</view>
     <view class="status">状态:<text>{{item.status}}</text></view>
    </view>
    <view class="operation">
     <view class="detail" catchtap="openDetail">详情</view>
     <view class="number" catchtap="getNumber">取号</view>
     <view class="delete" catchtap="deleteItem">删除</view>
    </view>
   </view>
  </view>
 </view>
</view>
.container .line {
 display: flex;
 padding: 20rpx 30rpx;
 border-bottom: 2rpx solid #ebebeb;
 position: relative;
 cursor: pointer;
}
 
.container .line .icon-title {
 margin-top: 28rpx;
 width: 30rpx;
 height: 30rpx;
}
 
.container .line .mes {
 flex: 1;
 margin-left: 10rpx;
}
 
.container .line .mes .date, .container .line .mes .status {
 color: #9d9d9d;
 font-size: 24rpx;
 margin-top: 4rpx;
}
 
.status text {
 color: #fba500;
}
 
.operation {
 position: absolute;
 top: 0;
 right: -300rpx;
 height: 152rpx;
 text-align: center;
 color: #fff;
 line-height: 152rpx;
 display: flex;
}
 
.operation view {
 width: 100rpx;
}
 
.operation .detail {
 background-color: #018efb;
}
 
.operation .number {
 background-color: #fba500;
}
 
.operation .delete {
 background-color: #cfcfcf;
}

2. 文件index.js存放所有功能的逻辑代码,下面主要分析几个重点方法:

1)方法touchmoveX用于手指触摸后移动时获取移动距离,并根据移动距离动画显示操作项相应区域,使移动有即时效果;

2)方法touchendX用于手指触摸动作结束时,如果移动距离达到100,则动画显示全部操作项区域;如果移动距离未达到100,则收起操作项区域;

3)方法deleteItem用于删除该条数据。

let movedistance = 0;
Page({
 data: {
  currentIndex: 0, // 列表操作项的index
  recordList: [{ // 列表数据
   id: 1,
   title: '业务办理01',
   date: '2020-04-21 10:30-12:00',
   status: '未取号'
  }, {
   id: 2,
   title: '业务办理02',
   date: '2020-04-21 10:30-12:00',
   status: '未取号'
  }, {
   id: 3,
   title: '业务办理03',
   date: '2020-04-21 10:30-12:00',
   status: '取号'
  }]
 },
 // 打开详情页
 openDetail() {
  console.log(this.data.currentIndex, '点击详情');
 },
 // 取号
 getNumber() {
  console.log(this.data.currentIndex, '点击取号');
 },
 // 删除数据
 deleteItem() {
  let that = this;
  let recordList = this.data.recordList;
  wx.showModal({
   title: '提示',
   content: '是否删除该条数据?',
   success(res) {
    if (res.confirm) {
     that.slideAnimation(0, 500);
     recordList.splice(that.data.currentIndex, 1);
     that.setData({
      recordList: recordList
     });
    } else if (res.cancel) {
     console.log('用户点击取消')
    }
   }
  });
 },
 // 手指触摸动作开始
 touchstartX(e) {
  this.setData({
   currentIndex: e.currentTarget.dataset.index
  });
  // 获取触摸X坐标
  this.recordX = e.touches[0].clientX;
 },
 // 点击操作
 resetX() {
  this.slideAnimation(0, 500);
 },
 // 手指触摸后移动
 touchmoveX(e) {
  let currentX = e.touches[0].clientX;
  movedistance = currentX - this.recordX; // 获取移动距离
  this.slideAnimation(movedistance, 500);
 },
 // 手指触摸动作结束
 touchendX() {
  let recordX;
  if (movedistance <= -100) { // 移动达到距离就动画显示全部操作项
   recordX = -300;
  } else if (movedistance >= -100) { // 移动未达到距离即还原
   recordX = 0;
  }
  this.slideAnimation(recordX, 500);
 },
 // 滑动动画
 slideAnimation(recordX, time) {
  let animation = wx.createAnimation({
   duration: time,
   timingFunction: 'ease'
  });
  animation.translate(recordX + 'rpx', 0).step()
  this.setData({
   animation: animation.export()
  })
 },
 onLoad: function(options) {
  wx.setNavigationBarTitle({
   title: '银行业务',
  });
  movedistance = 0; // 解决切换到其它页面再返回该页面动画失效的问题
 }
})

到此这篇关于微信小程序实现滑动操作代码的文章就介绍到这了,更多相关微信小程序滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery随机展示头像代码
Dec 21 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
layui表格实现代码
May 20 Javascript
详解webpack打包vue时提取css
May 26 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 #Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 #Javascript
JS eval代码快速解密实例解析
Apr 23 #Javascript
浅谈vue权限管理实现及流程
Apr 23 #Javascript
js实现简单的贪吃蛇游戏
Apr 23 #Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
一个域名查询的程序
2006/10/09 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
Javascript实现单例模式
2016/01/24 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python 的类、继承和多态详解
2017/07/16 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
文员岗位职责
2013/11/09 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
大型晚会策划方案
2014/02/06 职场文书
开工仪式主持词
2014/03/20 职场文书
个人廉洁自律总结
2015/03/06 职场文书
小学教师岗位职责
2015/04/02 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏