文章

小程序如何实现侧滑删除功能

这篇“小程序如何实现侧滑删除功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序如何实现侧滑删除功能

这篇“小程序如何实现侧滑删除功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序如何实现侧滑删除功能”文章吧。

1.页面布局

  1. <view class='dialogue-box'>
  2.       <scroll-view scroll-y="true" >
  3.         <view class='top-list'>
  4.           <view class='standard_text1'>#</view>
  5.           <view class='standard_text2'>积分项目</view>
  6.           <view class='standard_text3'>标准分</view>
  7.           <view class='standard_text4' bindtap='AddIntegrationProject'>
  8.             <view class='standard_btn'>+</view>
  9.           </view>
  10.         </view>
  11.         <view wx:if="{{lists.length>0}}">
  12.           <view class='top-list'>
  13.             <view wx:for="{{lists}}" wx:key="{{index}}" class='main_item'>
  14.               <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{index}}'  class="inner txt">
  15.                 <view class='standard_text1'>{{index+1}}</view>
  16.                 <view class='standard_text2'>{{item.itemName}}</view>
  17.                 <view class='standard_text3'>{{item.score}}分</view>
  18.                 <view class='standard_text4'>
  19.                   <image class='standard_icon' bindtap='editStanderClick' data-item='{{item}}' src='{{BaseURL}}uploadFile/groupImages/edit-h3.png'></image>
  20.                 </view>
  21.               </view>
  22.               <view data-index="{{index}}" bindtap='delectOrganizationTeamScoreStandard' data-id='{{item.ID}}' class="inner del">删除</view>
  23.             </view>
  24.           </view>
  25.         </view>
  26.         <view class='No-data' wx:else>
  27.           <image src='{{BaseURL}}uploadFile/groupImages/No-data.png'></image>
  28.           <view class='No-text'>亲！暂无您的上月积分记录！</view>
  29.         </view>
  30.       </scroll-view>
  31. </view>

2.样式

  1. /* 标准s */
  2.  
  3. .standard_text1 {
  4.   height: 80rpx;
  5.   line-height: 80rpx;
  6.   float: left;
  7.   width: 60rpx;
  8.   font-size: 28rpx;
  9.   color: #3b3c42;
  10.   padding-left: 30rpx;
  11. }
  12.  
  13. .standard_text2 {
  14.   line-height: 80rpx;
  15.   float: left;
  16.   width: 380rpx;
  17.   font-size: 28rpx;
  18.   color: #3b3c42;
  19. }
  20.  
  21. .standard_text3 {
  22.   height: 80rpx;
  23.   line-height: 80rpx;
  24.   float: left;
  25.   width: 130rpx;
  26.   font-size: 28rpx;
  27.   color: #3b3c42;
  28. }
  29.  
  30. .standard_text4 {
  31.   height: 80rpx;
  32.   line-height: 80rpx;
  33.   float: left;
  34.   width: 140rpx;
  35.   font-size: 28rpx;
  36.   color: #3b3c42;
  37. }
  38.  
  39. .standard_btn {
  40.   height: 50rpx;
  41.   line-height: 50rpx;
  42.   float: left;
  43.   border: 1px solid #3891f8;
  44.   color: #3891f8;
  45.   width: 50rpx;
  46.   text-align: center;
  47.   font-size: 36rpx;
  48.   border-radius: 60px;
  49.   margin-top: 10rpx;
  50.    margin-left: 60rpx;
  51. }
  52.  
  53. .standard_icon {
  54.   height: 60rpx;
  55.   width: 60rpx;
  56.   margin-top: 8rpx;
  57.   float: left;
  58.   margin-left: 55rpx;
  59. }
  60.  
  61. /* 侧滑删除s */
  62. .main_item {
  63.   float: left;
  64.   width: 100%;
  65.   background-color: #fff;
  66.   position: relative;
  67.   overflow: hidden;
  68.   height: 40px;
  69.   line-height: 40px;
  70. }
  71. .inner {
  72.   position: absolute;
  73.   top: 0;
  74.   width: 100%;
  75.   line-height: 80rpx;
  76.   height: 80rpx;
  77.   float: left;
  78. }
  79.  
  80. .inner.txt {
  81.   background-color: #fff;
  82.   width: 100%;
  83.   z-index: 5;
  84.   transition: left 0.2s ease-in-out;
  85.   white-space: nowrap;
  86.   overflow: hidden;
  87.   text-overflow: ellipsis;
  88. }
  89.  
  90. .inner.del {
  91.   background-color: #e64340;
  92.   width: 150rpx;
  93.   text-align: center;
  94.   z-index: 4;
  95.   right: 0;
  96.   color: #fff;
  97. }
  98.  
  99. /* 侧滑删除e */

3.js

  1. var app = getApp();
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     currentTab: 0,
  9.     BaseURL: app.globalData.BaseURL, //图片后台
  10.     mDate: '',
  11.  
  12.     delBtnWidth: 180 //删除按钮宽度单位（rpx）
  13.   },
  14.  
  15.   /**
  16.    * 生命周期函数--监听页面加载
  17.    */
  18.   onLoad: function(options) {
  19.     var that = this;
  20.     that.getOrganizationTeamScore(); //获取标准积分
  21.     // 获取系统宽高信息 
  22.     wx.getSystemInfo({
  23.       success: function(res) {
  24.         that.setData({
  25.           winWidth: res.windowWidth,
  26.           winHeight: res.windowHeight
  27.         });
  28.       }
  29.     });
  30.     that.initEleWidth(); //侧滑删除S
  31.   },
  32.  
  33.   /*****************侧滑删除S*******************/
  34.   touchS: function(e) {
  35.     if (e.touches.length == 1) {
  36.       this.setData({
  37.         //设置触摸起始点水平方向位置
  38.         startX: e.touches[0].clientX
  39.       });
  40.     }
  41.   },
  42.   touchM: function(e) {
  43.     if (e.touches.length == 1) {
  44.       //手指移动时水平方向位置
  45.       var moveX = e.touches[0].clientX;
  46.       //手指起始点位置与移动期间的差值
  47.       var disX = this.data.startX - moveX;
  48.       var delBtnWidth = this.data.delBtnWidth;
  49.       var txtStyle = "";
  50.       if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
  51.         txtStyle = "left:0px";
  52.       } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
  53.         txtStyle = "left:-" + disX + "px";
  54.         if (disX >= delBtnWidth) {
  55.           //控制手指移动距离最大值为删除按钮的宽度
  56.           txtStyle = "left:-" + delBtnWidth + "px";
  57.         }
  58.       }
  59.       //获取手指触摸的是哪一项
  60.       var index = e.currentTarget.dataset.index
  61.       // var index = e.target.dataset.index;
  62.       var lists = this.data.lists;
  63.       lists[index].txtStyle = txtStyle;
  64.       //更新列表的状态
  65.       this.setData({
  66.         lists: lists
  67.       });
  68.     }
  69.   },
  70.  
  71.   touchE: function(e) {
  72.     if (e.changedTouches.length == 1) {
  73.       //手指移动结束后水平位置
  74.       var endX = e.changedTouches[0].clientX;
  75.       //触摸开始与结束，手指移动的距离
  76.       var disX = this.data.startX - endX;
  77.       var delBtnWidth = this.data.delBtnWidth;
  78.       //如果距离小于删除按钮的1/2，不显示删除按钮
  79.       var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
  80.       //获取手指触摸的是哪一项
  81.       var index = e.currentTarget.dataset.index
  82.       // var index = e.target.dataset.index;
  83.       var lists = this.data.lists;
  84.       lists[index].txtStyle = txtStyle;
  85.       //更新列表的状态
  86.       this.setData({
  87.         lists: lists
  88.       });
  89.     }
  90.   },
  91.  
  92.   //获取元素自适应后的实际宽度
  93.   getEleWidth: function(w) {
  94.     var real = 0;
  95.     try {
  96.       var res = wx.getSystemInfoSync().windowWidth;
  97.       var scale = (750 / 2) / (w / 2); //以宽度750px设计稿做宽度的自适应
  98.       // console.log(scale);
  99.       real = Math.floor(res / scale);
  100.       return real;
  101.     } catch (e) {
  102.       return false;
  103.       // Do something when catch error
  104.     }
  105.   },
  106.  
  107.   initEleWidth: function() {
  108.     var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
  109.     this.setData({
  110.       delBtnWidth: delBtnWidth
  111.     });
  112.   },
  113.  
  114.   //点击删除按钮事件
  115.   delItem: function(e) {
  116.     //获取列表中要删除项的下标
  117.     var index = e.currentTarget.dataset.index
  118.     // var index = e.target.dataset.index;
  119.     var lists = this.data.lists;
  120.     //移除列表中下标为index的项
  121.     lists.splice(index, 1);
  122.     //更新列表的状态
  123.     this.setData({
  124.       lists: lists
  125.     });
  126.   },
  127.   /*****************侧滑删除e*******************/
  128.  
  129.   /************************标准制定s***************/
  130.   /**获取积分标准 */
  131.   getOrganizationTeamScore: function() {
  132.     var that = this;
  133.     wx.request({
  134.       header: {
  135.         "Content-Type": "application/x-www-form-urlencoded"
  136.       },
  137.       method: 'POST',
  138.       url: app.globalData.BaseURL + 'group/v1/getOrganizationTeamScore.html',
  139.       data: {
  140.         organizationTeamID: that.data.organizationTeamID,
  141.       },
  142.       success: function(res) {
  143.         wx.hideLoading();
  144.         console.log("获取积分标准", res.data)
  145.         var status = res.data.status;
  146.         var info = res.data.info
  147.         if (status.indexOf("SUCCESS") == 0) {
  148.           that.setData({
  149.             lists: info
  150.           })
  151.         } else {
  152.           wx.showToast({
  153.             title: '获取失败',
  154.             icon: 'none'
  155.           })
  156.         }
  157.       }
  158.     })
  159.   },
  160.  
  161.   /**删除标准 */
  162.   delectOrganizationTeamScoreStandard: function(e) {
  163.     var organizationTeamScoreStandardID = e.currentTarget.dataset.id;
  164.     var that = this;
  165.     wx.showModal({
  166.       title: '删除此条标准记录',
  167.       content: '是否删除？',
  168.       success: function(res) {
  169.         if (res.confirm) {
  170.           console.log('用户点击确定')
  171.           wx.request({
  172.             header: {
  173.               "Content-Type": "application/x-www-form-urlencoded"
  174.             },
  175.             method: 'POST',
  176.             url: app.globalData.BaseURL + 'group/v1/delectOrganizationTeamScoreStandard.do',
  177.             data: {
  178.               organizationTeamScoreStandardID: organizationTeamScoreStandardID,
  179.             },
  180.             success: function(res) {
  181.               var status = res.data.status;
  182.               var info = res.data.info
  183.               if (status.indexOf("SUCCESS") == 0) {
  184.                 wx.showToast({
  185.                   title: '操作成功',
  186.                   icon: 'none'
  187.                 })
  188.                 that.getOrganizationTeamScore();
  189.               } else {
  190.                 wx.showToast({
  191.                   title: '数据使用中，无法删除！',
  192.                   icon: 'none'
  193.                 })
  194.               }
  195.             }
  196.           })
  197.         } else if (res.cancel) {
  198.           console.log('用户点击取消')
  199.         }
  200.       }
  201.     })
  202.   },
  203.  
  204.   /**修改标准 */
  205.   editStanderClick: function(e) {
  206.     var item = e.currentTarget.dataset.item;
  207.     wx.navigateTo({
  208.       url: '/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProject?organizationTeamID=' + this.data.organizationTeamID +
  209.         '&organizationTeamScoreStandardID=' + item.ID +
  210.         '&scoreStanderFixID=' + item.scoreStanderFixID +
  211.         '&itemName=' + item.itemName +
  212.         '&score=' + item.score +
  213.         '&unit=' + item.unit +
  214.         '&isEdit=1',
  215.     })
  216.   },
  217.  
  218.   // 添加积分项目
  219.   AddIntegrationProject: function() {
  220.     wx.navigateTo({
  221.       url: '/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProject?organizationTeamID=' + this.data.organizationTeamID,
  222.       success: function(res) {},
  223.       fail: function(res) {},
  224.       complete: function(res) {},
  225.     })
  226.   },
  227.   /************************标准制定e***************/
  228.   /**
  229.    * 生命周期函数--监听页面初次渲染完成
  230.    */
  231.   onReady: function() {
  232.  
  233.   },
  234.  
  235.   /**
  236.    * 生命周期函数--监听页面显示
  237.    */
  238.   onShow: function() {
  239.     var that = this;
  240.     that.getOrganizationTeamScore(); //标准制定
  241.   },
  242.  
  243.   /**
  244.    * 生命周期函数--监听页面隐藏
  245.    */
  246.   onHide: function() {
  247.  
  248.   },
  249.  
  250.   /**
  251.    * 生命周期函数--监听页面卸载
  252.    */
  253.   onUnload: function() {
  254.  
  255.   },
  256.  
  257.   /**
  258.    * 页面相关事件处理函数--监听用户下拉动作
  259.    */
  260.   onPullDownRefresh: function() {
  261.  
  262.   },
  263.  
  264.   /**
  265.    * 页面上拉触底事件的处理函数
  266.    */
  267.   onReachBottom: function() {
  268.  
  269.   },
  270.  
  271.   /**
  272.    * 用户点击右上角分享
  273.    */
  274.   onShareAppMessage: function() {
  275.  
  276.   }
  277. })

4.效果图

小程序如何实现侧滑删除功能

以上就是关于“小程序如何实现侧滑删除功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡网行业资讯频道。

本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
小程序
后端

如何用CSS给普通黑色二维码添上彩色渐变

2022-7-16 9:04:19

后端

python单因素分析线性拟合及地理编码源码分析

2022-7-16 9:04:24

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定
确定
×

举报

请选择举报类型*

政治有害
不友善
垃圾广告
违法违规
色情低俗
涉嫌侵权
网络暴力
涉未成年
自杀自残
不实信息
引人不适
抄袭
扰乱社区秩序
请输入举报内容 *

举报提交后，我们会以邮件的形式向您反馈处理结果。

×

打开微信扫一扫

扫码并「关注我们的公众号」安全快捷登录

×

下载海报：

搜索

  • 扫码打开当前页

返回顶部