用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序左滑删除效果

纸飞机 2018-3-8 09:37

作者:Song,来自原文地址 没有高度封装,有人愿意封装优化下的可以弄下 效果图 1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件 {{item.content}} 删除 2、wxss flex布局、css3动画.touch ...

作者:Song,来自

原文地址


没有高度封装,有人愿意封装优化下的可以弄下
效果图

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

  1. class="container">
  2. class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
  3. class="content">{{item.content}}
  4. class="del" catchtap="del" data-index="{{index}}">删除

2、wxss flex布局、css3动画

  1. .touch-item {
  2. font-size: 14px;
  3. display: flex;
  4. justify-content: space-between;
  5. border-bottom:1px solid #ccc;
  6. width: 100%;
  7. overflow: hidden
  8. }
  9. .content {
  10. width: 100%;
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏