使用MUI 实现模仿QQ向左滑动出现删除，编辑的代码

最新推荐文章于 2024-08-22 07:29:08 发布

迷途明

最新推荐文章于 2024-08-22 07:29:08 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/weixin_41905935/article/details/80847616

版权

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  link 
  rel= 
  "stylesheet" 
  href= 
  "./mui/css/mui.css" 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  style 
  > 
 
 
  /* 使出现的错误隐藏[Intervention] Unable to preventDefault inside passive event listener due to target being treated as */ 
 
 
  html,body{ 
 
 
  touch-action: 
  none; 
 

   } 
 
 
  ul li a{ 
 
 
  font-size: 
  14px 
  !important; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  ul 
  id= 
  "OA_task_2" 
  class= 
  "mui-table-view" 
  > 
 
 
  < 
  li 
  class= 
  "mui-table-view-cell" 
  > 
 
 
  < 
  div 
  class= 
  "mui-slider-right mui-disabled" 
  > 
 
 
  < 
  a 
  class= 
  "mui-btn mui-btn-grey mui-icon" 
  >编辑 
  </ 
  a 
  > 
 
 
  < 
  a 
  class= 
  "mui-btn mui-btn-yellow mui-icon" 
  >删除 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  class= 
  "mui-slider-handle" 
  > 
 
 
  < 
  div 
  class= 
  "mui-table-cell" 
  > 
 

   左滑显示多功能菜单 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  < 
  script 
  src= 
  "./mui/js/mui.js" 
  ></ 
  script 
  > 
 
 
  </ 
  html 
  > 
 