小程序滴滴车主板块的银行卡管理左滑删除编辑

最近在类似于滴滴软件的一款小程序,工程确实有点大,很多东西都是第一次做。这次记录一下关于左滑删除的一个代码记录。主要的思想就是计算滑动距离的大小来使用css中的 transition 控制滑动的效果,主流的都是控制边距margin来达到左滑的效果。

根据我所拿到的ui,我所运用的是使用宽度和radius来达到左滑的效果,造一个属性值,并塞进遍历数组进行判断是true还是false来控制样式。

完成效果:

html

<view class=‘content‘>
  <view class=‘item-box‘ wx:for="{{bankList}}" wx:key="index">
    <view class="card-item {{item.txtStyle==‘true‘ ? ‘txtStyleFalse‘:‘txtStyleTrue‘}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"  data-index="{{index}}">
      <view class=‘bank‘>{{item.bank}}</view>
      <view class=‘names‘>{{item.names}}</view>
      <view class=‘card-num‘>{{item.cardNum}}</view>
    </view>
    <view class=‘handle flex-box-start-top‘>
      <view class=‘edit‘>编辑</view>
      <view class=‘delect‘>删除</view>
    </view>
  </view>
</view>

js

/**
   * 页面的初始数据
   */
  data: {
    bankList:[
      { ‘bank‘:‘中国建设银行(建安支行)‘,
        ‘names‘:‘章三‘,
        ‘cardNum‘:‘***** ******* ***** ***0910‘
      },
      {
        ‘bank‘: ‘中国工商银行(建安支行)‘,
        ‘names‘: ‘章三‘,
        ‘cardNum‘: ‘***** ******* ***** ***0910‘
      },
    ],
    editIndex: 0,
    delBtnWidth:180//删除按钮宽度单位(rpx)
  },
  /*自定义方法--start */
  //
  touchS: function (e) {
    if (e.touches.length == 1) {
      this.setData({
        stX: e.touches[0].clientX
      });
    }
  },
  touchM: function (e) {
    console.log("touchM:" + e);
     var that = this
    if (e.touches.length == 1) {
      //记录触摸点位置的X坐标
      var moveX = e.touches[0].clientX;
      //计算手指起始点的X坐标与当前触摸点的X坐标的差值
      var disX = that.data.stX - moveX;
      //delBtnWidth 为右侧按钮区域的宽度
      var delBtnWidth = that.data.delBtnWidth;
      var txtStyle = "true";
      if(disX == 0 || disX < 0){
        //如果移动距离小于等于0,文本层位置不变 width: 660rpx;border-radius: 10rpx;
        // txtStyle = "left:0px";
        txtStyle = "true";
      }else if(disX > 0 ){
        //移动距离大于0,文本层left值等于手指移动距离 width: 470rpx;border-radius: 10rpx 0px 0px 10rpx;
        // txtStyle = "left:-"+disX+"px";
        txtStyle = "false";
        // if(disX>=delBtnWidth){
        //   //控制手指移动距离最大值为删除按钮的宽度
        //   txtStyle = "left:-"+delBtnWidth+"px";
        // }
      }
      //获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.bankList;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      this.setData({ bankList:list });
      // console.log(this.data.bankList)
    }
  },
  touchE: function (e) {
    console.log("touchE" + e);
    var that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束,手指移动的距离
      var disX = that.data.stX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2,不显示删除按钮
      var txtStyle = disX > delBtnWidth/2 ? "true":"false";
      //获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.bankList; list[index].txtStyle = txtStyle;
      //更新列表的状态
      that.setData({ bankList:list });
    }
  },

  /*自定义方法--end */

感谢博文:https://www.jianshu.com/p/07c4ddf8a3d3

提供的思路和方法,以上多数js方法摘自此博文。当然css的控制也是很重要的

原文地址:https://www.cnblogs.com/web1/p/9443934.html

时间: 2024-10-08 11:13:43

小程序滴滴车主板块的银行卡管理左滑删除编辑的相关文章

微信小程序实现左滑删除源码

左滑删除效果在app的交互方式中十分流行,比如全民应用微信 微信左滑删除 再比如曾引起很大反响的效率app Clear Clear左滑删除 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一下组件,再加上些坐标计算,状态记录就可以了.也有一些文章介绍了在小程序上如何实现这一效果,不过我基本可以确定这些开发者没有在真机上详细测试,因为经我实践发现,在小程序上想要完美实现这个效果几乎是不可能完成的任务. 这一切要从小程序的事件机制说起.对于滑动类操作,小程序提供了bind和catch两种响

小程序实现左滑删除效果

小程序的左滑删除效果用的是组件 movable-area 和 movable-view 文档 : https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html 1.movable-area基本概念 (1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看: 注意:movable-area 必须设置width和heigh

点餐小程序,点餐系统,管理后台批量导入excel菜品数据

点餐系统上线这段时间,有好多同学反馈,是否可以添加一个菜品批量导入的功能.由于平时比较忙,一直没有时间把菜品批量导入的功能加进来.今天正好空出来时间了,就来教大家实现下菜品批量导入的功能. 后面会把这节功能录制成视频放到点餐系统的课程里. 传送门:" rel="nofollow">点餐系统,java后台+点餐小程序 老规矩,先看效果图 选择excel菜品导入数据成功 之前有看过我课程的同学肯定知道,我之前是没有批量导入的类目的,不错,这个类目就是我们今天新加的功能. 实

微信小程序左滑删除未操作有复位效果

1.wxml <!--pages/test/test.wxml--> <view class="page"> <movable-area class="m_a" wx:for="{{plist}}" wx:key="*this" wx:for-index="id" > <movable-view class="data_list" directi

小程序中实现录音功能(按住录制上滑取消)

1.template文本,提供一个按住录制的按钮 <view class="tip-touchmove" wx:if="{{showCancelType==2}}"> 上滑取消</view><view class="tip-touchmove" wx:if="{{showCancelType==3}}"> 松开手指,取消录音</view> <view class="

微信小程序列表左滑删除,删除按钮自适应高度,删除后列表归位,同时存在一个左滑元素,目前为止写过最舒服的左滑删除

js page({ data:{ items:[ //isTouchMove初始化取消所有元素的向左滑动 {name:'店名范德萨',huowu:'鸭脖货物鸭肠鸭头鸭爪鸭翅',time:'2032-32-32 12:21',zhuangtai:'待付款',price:'23',current:1,isTouchMove: false}, {name:'店名久久丫',huowu:'鸭脖货物鸭肠鸭头鸭爪鸭翅',time:'2032-32-32 12:21',zhuangtai:'待收货',price

更新 | 移动端BUG管理小程序功能更新!

目前,移动端BUG管理小程序已经上线并且保持持续更新,欢迎大家使用!扫描小程序码就可以随时随地进行BUG管理了哦!一.注册/登录如果您是第一次使用MadPecker,可以直接在小程序里完成注册.小程序登录时用的邮箱地址和密码和PC端的一致,而且登录一次之后,下次进入小程序直接进入项目界面,免去了重复登录的烦恼.二.处理BUGMadPecker小程序和PC端数据完全互通,在小程序上可以完成指派.完成.通过.不通过.关闭.再打开等操作.三.统计项目管理者可以在小程序上随时查看项目进度.项目成员工作进

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [