文章目录

前言
一、左划删除效果实现
- 1.自定义实现
- 2.第三方组件实现
- - 2.1 第三方包安装
  - 2.2 使用
- 3.1 weui方式使用
- - 3.1 weui安装
  - 3.2 使用

前言

左划删除效果实现主要用到两个标签：movable-area、movable-view。

1、movable-area

movable-view的可移动区域：

movable-area 必须设置 width 和height属性，不设置默认为10px
当 movable-view 小于 movable-area 时，movable-view的移动范围是在 movable-area 内
当 movable-view 大于 movable-area 时，movable-view的移动范围必须包含movable-area（x轴方向和 y 轴方向分开考虑）
若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现

2、movable-area
可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动：

movable-view 必须设置 width 和height属性，不设置默认为10px
movable-view 默认为绝对定位，top和 left 属性为0px
若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现

一、左划删除效果实现

1.自定义实现

<view class="page-section-title">左侧删除</view>
<view class="list_item"><movable-area style="width:750rpx;height:100rpx;"><movable-view style="width:1050rpx;height:100rpx;" direction="horizontal" class="max"><view class="left">这里是插入到组内容</view><view class="right"><view class="read">已读</view><view class="delete">删除</view></view></movable-view></movable-area>
</view>

movable-view {display: flex;align-items: center;justify-content: center;height: 100rpx;width: 100rpx;background: #1AAD19;color: #fff;
}movable-area {height: 400rpx;width: 400rpx;background-color: #ccc;overflow: hidden;
}.max {width: 600rpx;height: 600rpx;background-color: blue;
}.list_item {display: flex;border-bottom: 1px solid #DEDEDE;
}.slide{/* border-top:1px solid #ccc; */border-bottom:1px solid #DEDEDE;
}
.left {background-color: white;height: 100rpx;width: 750rpx;display: flex;flex-direction: row;color: grey;line-height: 100rpx;padding-left: 30rpx;
}
.right {height: 100;display: flex;direction: row;text-align: center;vertical-align: middle;line-height: 110rpx;
}
.read {background-color: #ccc;color: #fff;width: 150rpx;
}
.delete {background-color: red;color: #fff;width: 150rpx;
}
/*  */
.slideViewClass .weui-cell{padding: 0;
}

2.第三方组件实现

2.1 第三方包安装

第三方组件实现的安装步骤如下：

项目根目录下执行npm init -y 命令完成后项目会生成package.json文件
在执行安装包命令：npm install --save miniprogram-slide-view
小程序开发者工具选择：菜单-工具-构建npm

2.2 使用

{"usingComponents": {"slide-view": "miniprogram-slide-view"}
}

<view class="page-section-title">左侧删除2</view>
<slide-view class="slide" width="750" height="100" slideWidth="300"><view class="left" slot="left">这里是插入到组内容2</view><view class="right" slot="right"><view class="read">已读</view><view class="delete">删除</view></view>
</slide-view>

注意：这边实现效果移动大于百分50置顶右边，百分50置顶左边

3.1 weui方式使用

3.1 weui安装

在app.js中使用扩展声明：

"useExtendedLib": {"weui": true
}

小程序开发者工具选择：菜单-工具-构建npm 就完成了weui的引入

3.2 使用

{"usingComponents": {"mp-slideview": "weui-miniprogram/slideview/slideview"}
}

<view class="page__bd"><view class="weui-cells"><mp-slideview ext-class="slideViewClass" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap"><mp-cell value="标题文字"></mp-cell></mp-slideview></view><view class="weui-cells"><mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap"><view class="weui-slidecell">左滑可以删除（图标Button）111</view></mp-slideview></view>
</view>

onLoad: function(){this.setData({icon: base64.icon20,slideButtons: [{text: '普通1',src: '/images/icon_love.svg', // icon的路径},{text: '普通2',extClass: 'test',src: '/images/icon_star.svg', // icon的路径},{type: 'warn',text: '警示3',extClass: 'test',src: '/images/icon_del.svg', // icon的路径}],});
},

【愚公系列】2022年08月微信小程序-左划删除效果实现相关推荐

【愚公系列】2022年08月微信小程序-(rich-text)富文本和(text)文本的详解
文章目录前言一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用二.文本 1.文本属性前言富文本格式 ...
【愚公系列】2022年08月微信小程序-view生成分享图片
文章目录前言一.view生成分享图片 1.组件的封装 2.组件的使用 3.效果 4.第三方工具的使用前言微信小程序并不支持view直接转绘到画布上,想要实现海报功能必须通过以下4个步骤: 通过 ...
【愚公系列】2022年08月微信小程序项目篇-抽奖轮盘
文章目录前言一.抽奖轮盘 1.标题布局 1.1 CSS 1.2 HTML 1.4 效果 2.轮盘布局 2.1 CSS 2.2 HTML 2.3 效果 3.轮盘分割 3.1 CSS 3.2 HTML ...
【愚公系列】2022年08月微信小程序-icon图标详解
文章目录前言一.自带图标二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式前言在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...
【愚公系列】2022年08月微信小程序-纵向和横向选项卡功能实现
文章目录前言一.纵向选项卡(weui版) 1.安装包 2.使用二.横向选项卡(weui版) 1.安装包 2.使用前言纵向选项卡(vtabs)用于让用户在不同的视图中进行切换. 以下讲解的是w ...
微信小程序左滑删除效果的实现完整源码附效果图
效果图: 功能描述,小程序列表左滑删除功能的实现完整源代码实现: <view wx:for='{{friends}}' wx:key="" wx:if='{{groupTyp ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付后端功能实现（node版）
文章目录前言一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
【愚公系列】2022年02月微信小程序-数据绑定
文章目录前言 1.小程序页面结构 2.数据绑定的定义一.数据绑定 1.简单绑定总结前言 1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成: js(逻辑处理文件):负责页面逻辑内 ...

【愚公系列】2022年08月微信小程序-左划删除效果实现

文章目录

前言

一、左划删除效果实现

1.自定义实现

2.第三方组件实现

2.1 第三方包安装

2.2 使用

3.1 weui方式使用

3.1 weui安装

3.2 使用

【愚公系列】2022年08月微信小程序-左划删除效果实现相关推荐

最新文章

热门文章

【愚公系列】2022年08月 微信小程序-左划删除效果实现

文章目录

前言

一、左划删除效果实现

1.自定义实现

2.第三方组件实现

2.1 第三方包安装

2.2 使用

3.1 weui方式使用

3.1 weui安装

3.2 使用

【愚公系列】2022年08月 微信小程序-左划删除效果实现相关推荐

最新文章

热门文章

【愚公系列】2022年08月微信小程序-左划删除效果实现

【愚公系列】2022年08月微信小程序-左划删除效果实现相关推荐