请选择 进入手机版 | 继续访问电脑版

AVM框架 封装滑动单元格组件

技术博客 2022-6-23 13:21 42人浏览 2人回复
原作者: wuliyuye 收藏 邀请
摘要

滑动单元格组件原理是主题部分把按钮进行遮挡,按钮通过绝对定位,定位在最右边,通过监听触摸事件(touch),判断滑动的方向和计算滑动的距离以此来判定显示和隐藏按钮。显示和隐藏按钮是通过对主体部分进行css 的t ...

滑动单元格组件原理是主题部分把按钮进行遮挡,按钮通过绝对定位,定位在最右边,通过监听触摸事件(touch),判断滑动的方向和计算滑动的距离以此来判定显示和隐藏按钮。显示和隐藏按钮是通过对主体部分进行css 的transform属性对主体元素进行移动,以达到显示和隐藏按钮的效果。
组件文件easy-swipe-cell.stml
  1. <template>
  2.         <view class="easy-swipe-cell_container" data-id={itemId} @touchstart="start" @touchmove="move" @touchend="end">
  3.                 <view class="easy-swipe-cell_content" :style="itemId == touchIdNow?handleSwipe:'transform:translateX(0px)'">
  4.                         <text>{itemContent}</text>
  5.                 </view>
  6.                 <view class="easy-swipe-cell_btn" id="btn">
  7.                         <view class="easy-swipe-cell_btn-item" style="background-color: #ee0a24;" data-id={itemId} data-type='delete' @click="clickItem">
  8.                                 <text class="easy-swipe-cell_btn-item-label">删除</text>
  9.                         </view>
  10.                         <view class="easy-swipe-cell_btn-item" style="background-color: #07c160;" data-id={itemId} data-type='read' @click="clickItem">
  11.                                 <text class="easy-swipe-cell_btn-item-label">已读</text>
  12.                         </view>
  13.                 </view>
  14.         </view>
  15. </template>
  16. <script>
  17.         export default {
  18.                 name: 'easy-swipe-cell',
  19.                 props:{
  20.                         itemId:String,
  21.                         itemContent:String,
  22.                         touchIdNow:String
  23.                 },
  24.                 data() {
  25.                         return{
  26.                                 startX:0, //触摸位置
  27.                                 endX:0, //结束位置
  28.                                 moveX: 0, //滑动时的位置
  29.                                 disX: 0, //移动距离
  30.                                 handleSwipe: '',//滑动时的效果,动态绑定                       
  31.                                 touchId:''
  32.                         }
  33.                 },
  34.                 mounted (){

  35.                 },
  36.                 methods: {
  37.                         start(e){
  38.                                 // console.log(JSON.stringify(e.detail)+'开始');
  39.                                 this.data.startX = e.detail.x;
  40.                                 this.data.touchId = e.currentTarget.dataset.id;
  41.                                 this.fire('touch',this.data.touchId);
  42.                         },
  43.                         move(e){
  44.                                 // console.log(JSON.stringify(e.detail)+'移动');
  45.                                 let wd=document.getElementById('btn').offsetWidth;
  46.                                 this.data.moveX = e.detail.x;
  47.                                 this.data.disX = this.data.startX - this.data.moveX;
  48.                                 console.log(this.data.disX);
  49.                                 // 如果是向右滑动或者不滑动,不改变滑块的位置
  50.                                 if(this.disX < 0 || this.disX == 0) {
  51.                                         this.data.handleSwipe = "transform:translateX(0px)";
  52.                                         // 大于0,表示左滑了,此时滑块开始滑动
  53.                                 }else if (this.disX > 0) {
  54.                                         //具体滑动距离我取的是 手指偏移距离*5。
  55.                                         this.data.handleSwipe = "transform:translateX(-" + this.disX*5 + "px)";
  56.                                         // 最大也只能等于按钮宽度
  57.                                         if (this.disX*5 >=wd) {
  58.                                                 this.handleSwipe = "transform:translateX(-" +wd+ "px)";
  59.                                         }                       
  60.                                 }
  61.                                 this.fire('touch',this.data.touchId);
  62.                         },
  63.                         end(e){
  64.                                 //console.log(JSON.stringify(e.detail)+'结束');
  65.                                 let wd=document.getElementById('btn').offsetWidth;
  66.                                 let endX = e.detail.x;
  67.                                 this.disX = this.data.startX - endX;
  68.                                 //如果距离小于按钮一半,强行回到起点
  69.                                 if ((this.disX*5) < (wd/2)) {
  70.                                         this.data.handleSwipe = "transform:translateX(0px)";
  71.                                 }else{
  72.                                 //大于一半 滑动到最大值
  73.                                         this.data.handleSwipe = "transform:translateX(-"+wd+ "px)";
  74.                                 }
  75.                                 this.fire('touch',this.data.touchId);
  76.                         },
  77.                         clickItem(e){
  78.                                 this.data.handleSwipe = "transform:translateX(0px)";
  79.                                 this.fire('clickBtn',{type:e.currentTarget.dataset.type,id:e.currentTarget.dataset.id});
  80.                         }
  81.         }
  82.         }
  83. </script>
  84. <style>
  85.         .easy-swipe-cell_content{
  86.                 justify-content: center;
  87.                 background-color: #ffffff;
  88.                 position: relative;
  89.                 width: 100%;
  90.                 left: 0;
  91.                 right: 0;
  92.                 top: 0;
  93.                 bottom: 0;
  94.                 z-index: 1000;
  95.                 transition: 0.6s;
  96.                 min-height: 50px;
  97.                 padding: 10px;
  98.         }
  99.         .easy-swipe-cell_btn{
  100.                 position: absolute;
  101.                 right: 0;
  102.                 top: 0;
  103.                 display: flex;
  104.                 flex-flow: row nowrap;
  105.                 height: 100%;
  106.                 z-index: 1;
  107.         }
  108.         .easy-swipe-cell_btn-item{       
  109.                 height: 100%;
  110.                 justify-content: center;
  111.                
  112.         }
  113.         .easy-swipe-cell_btn-item-label{
  114.                 color: #ffffff;
  115.                 font-size: 15px;
  116.                 padding: 0 20px;
  117.         }
  118. </style>
复制代码
示例文件demo-easy-swipe-cell.stml
  1. <template>
  2.         <scroll-view class="page">
  3.                 <safe-area></safe-area>
  4.                 <view v-for="(item,index) in list">
  5.                         <easy-swipe-cell
  6.                                 :itemId="item.id"
  7.                                 :itemContent="item.content"
  8.                                 :touchIdNow="touchID"
  9.                                 ontouch="getTouchID"
  10.                                 onclickBtn="getClickTyeAndId"
  11.                         >
  12.                         </easy-swipe-cell>
  13.                 </view>       
  14.         </scroll-view>
  15. </template>
  16. <script>
  17.         import '../../components/easy-swipe-cell.stml'
  18.         export default {
  19.                 name: 'demo-easy-swipe-cell',
  20.                 apiready(){//like created

  21.                 },
  22.                 data() {
  23.                         return{
  24.                                 list:[{
  25.                                         id:'1',
  26.                                         content:'关于开展什么活动的通知'
  27.                                 },{
  28.                                         id:'2',
  29.                                         content:'这是一条新的系统通知'
  30.                                 },{
  31.                                         id:'3',
  32.                                         content:'您有一条新的消息提醒,请及时查看'
  33.                                 }],
  34.                                 touchID:''
  35.                         }
  36.                 },
  37.                 methods: {
  38.                         getTouchID(e){
  39.                                 console.log(JSON.stringify(e));
  40.                                 this.data.touchID = e.detail;
  41.                         },
  42.                         getClickTyeAndId(e){
  43.                                 console.log(JSON.stringify(e));
  44.                                 api.toast({
  45.                                         msg:'当前点击的是'+e.detail.type+'按钮,记录ID是'+e.detail.id
  46.                                 })
  47.                         }
  48.                 }
  49.         }
  50. </script>
  51. <style>
  52.         .page {
  53.                 height: 100%;
  54.         }
  55. </style>
复制代码
示例展示
QQ视频20220615111539 (1).gif

评论
42人参与,2条评论

精彩评论
  • imo. APICloud VIP 346Y币
    发表于 2022-6-17 18:43
    唉,去年初做过,可是性能不佳,view-list做不了
  • wuliyuye 实习司机 23515Y币
    发表于 2022-6-22 16:54
    我测试的IOS很流畅,安卓看手机,15年的三星S5稍微有点,新手机没问题
    imo. · 2022-6-17 18:43唉,去年初做过,可是性能不佳,view-list做不了

查看全部评论>>