AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:40

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序小技巧系列《三》列表左右滑动,左滑删除功能实现 ... ...
相关的资讯,希望对您有帮助。

微信小程序小技巧系列《三》列表左右滑动,左滑删除功能实现 ... ...

本文作者刘冰华,来自原文地址关键js代码如下:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081// ...

本文作者刘冰华,来自原文地址

 

关键js代码如下:

 

  1. //关闭所有列表的的active
  2. closeLeftActive : function(sendUserId){
  3. var front__lists = this.data.front__lists,
  4. lists = this.data.lists,
  5. result;
  6. const fllen = front__lists.length,
  7. llen = lists.length;
  8. for(var i = 0; i < fllen; i++){
  9. front__lists[i][isMoveLeft] = false;
  10. front__lists[i][moveLeftX] = 0;
  11. if(sendUserId && sendUserId == front__lists[i][sendUserId]){
  12. this.touchElement = {
  13. t : front__lists,
  14. i : i
  15. }
  16. }
  17. }
  18. for(var i = 0; i < llen; i++){
  19. lists[i][isMoveLeft] = false;
  20. lists[i][moveLeftX] = 0;
  21. if(sendUserId && sendUserId == lists[i][sendUserId]){
  22. this.touchElement = {
  23. t : lists,
  24. i : i
  25. }
  26. }
  27. }
  28. this.setData({
  29. front__lists : front__lists,
  30. lists : lists
  31. });
  32. },
  33. moveX : 0,//全局点击按下时的X坐标
  34. touchElement : {},//当前点击的列表元素
  35. isRedirect : true,//是否松开时跳转,默认如果滑动未超过10像素,跳转至详情页
  36. //点击按下时
  37. listtouchStart : function(e){
  38. this.moveX = e.changedTouches[0].clientX;//获取当前点击按下时的的X坐标
  39. const senduserid = e.currentTarget.dataset.senduserid;//获取当前列表元素的ID
  40. this.closeLeftActive(senduserid);//关闭所有元素的滑动样式,并且获取到当前点击的元素在this.data中的位置
  41. this.isRedirect = true;//点击默认改成能跳转
  42. },
  43. //点击移动时
  44. listtouchMove : function(e){
  45. const moveX = e.changedTouches[0].clientX;//获取移动到新位置时的坐标
  46. var mx = this.moveX - moveX;//计算得到与按下时的X坐标移动多少像素
  47. if(mx > 10){//如果像素大于10像素
  48. this.isRedirect = false;//则不跳转
  49. /**将新的位置赋值到全局data渲染页面, */
  50. this.setData((function(ele,val,bool){
  51. var obj = {};
  52. obj[ele+moveLeftX] = val;//左移的值
  53. obj[ele+isMoveLeft] = bool;//控制是否超过40像素,则直接添加active样式类
  54. return obj;
  55. })(this.touchElement.t + [ + this.touchElement.i +], mx, (mx >= 40)));
  56. }else if(mx < 0){//如果是右滑,也不跳转
  57. this.isRedirect = false;
  58. }
  59. },
  60. //点击松开时
  61. listtouchEnd : function(e){
  62. if(this.isRedirect){//如果能跳转则跳转至新的详情页面
  63. const senduserid = e.currentTarget.dataset.senduserid;//获取参数
  64. wx.navigateTo({
  65. url: dialog?sendUserId= + senduserid
  66. });
  67. this.closeLeftActive();//初始化关闭所有打开的滑动效果
  68. return;
  69. }
  70. const moveX = e.changedTouches[0].clientX;
  71. var mx = this.moveX - moveX;
  72. if(mx < 40){//如果松开时位移小于40像素则回弹关闭
  73. this.closeLeftActive();
  74. }
  75. },
  76. //点击被取消时,如中途来电话了等,初始化关闭所有打开的滑动效果
  77. listtouchcancel : function(e){
  78. this.closeLeftActive();
  79. }

页面wxml文档

  1. <view class=lists>
  2. <view class=contain>
  3. <block wx:for={{lists}} wx:key={{item.sendUserId}}>
  4. <view class=list>
  5. <view class=list__content{{item.isMoveLeft ? active : }} style=left:-{{item.moveLeftX}}px;right:{{item.moveLeftX}}px; data-sendUserId={{item.sendUserId}} catchtouchstart=listtouchStart catchtouchend=listtouchEnd catchtouchcancel=listtouchcancel catchtouchmove=listtouchMove>
  6. <view class=list__hd>
  7. <image src={{item.img}}/>
  8. <view class=list__msgnumber wx:if={{item.silence}}>view>
  9. <view wx:elif={{item.msgNumber > 0}} class=list__messagenumber>
  10. <text hidden={{item.silence}} style=font-size:{{item.msgNumber > 99 ? 17 : 22}}rpx;>{{item.msgNumber > 99 ? 99+ : item.msgNumber}}text>
  11. view>
  12. view>
  13. <view class=list__bd>
  14. <view class=list__h3>
  15. <text class=list__name{{item.isteam ? list__teamname : }}>{{item.name}}text>
  16. <text class=list__sendtime>{{item.sendtime}}text>
  17. view>
  18. <view class=list__p{{item.silence ? silence : }}>{{(item.silence && item.msgNumber > 0) ? [+item.msgNumber +条] : }}{{item.desc}}view><image wx:if={{item.silence}} class=list__silence src=/image/silence.png>image>
  19. view>
  20. <view class=list__ft>
  21. view>
  22. view>
  23. <view class=list__bg_btns>
  24. <view class=list__bg_btn_gray>{{item.isteam ? 取消关注 : 标为已读}}view>
  25. <view class=list__bg_btn_red>删除view>
  26. view>
  27. view>
  28. block>
  29. view>
  30. view>

76阅读 | 0评论
你的回应