文件名称:
weixin-wepy-swipe-delete-微信小程序-wepy-侧滑删除组件-支持之定义内容区域.zip
开发工具:
文件大小: 3kb
下载次数: 0
上传时间: 2019-09-23
详细说明： 微信小程序-wepy-侧滑删除组件，支持自定义内容区在最近的微信小程序开发过程中需要用到侧滑删除的功能，微信小程序官方是没有提供这样的组件，再加上我们的微信小程序使用的是wepy组件开发框架开发的，wepy也没有提供这样的组件，之前也在github上搜索这方面的组件，没有发现合适的，当时只发现了一个开源的:https://github.com/GeoffZhu/wepy-swipe-delete 只不过该组件功能单一已经被作者废弃了，无奈自己动手撸了一个侧滑删除组件，现在把它开源出来吧。Requirementswepy: "^1.7.3"支持功能和特点自定义内容区域：支持之定义内容区域，组件内使用 slot占位。自定义滚动高度：可以自定义s croll-view的高度，默认为屏幕的高度。自定义menu ：如果默认的menu样式不喜欢可以自定义，也可以显示或者隐藏指定的menu。左右滑动：支持左右滑动也可以设置只左右或者右滑。效果如下： 如何使用目前支持两种使用模式：1.page页面模式优点：可定制化高，扩展性强。 缺点：集成复杂，代码复用性差。2.component 组件模式优点：集成简单，代码复用性强，减少包的大小。 缺点：可定制到低。不建议使用page页面模式，下面详细介绍component 组件模式的使用如何使用// 导入组件import SwipeDeleteView from /components/wepy-swipe-delete-view// 声明组件 components = { swipeDelete: SwipeDeleteView } // 引用组件 {{item.userName}} 配置如下：属性属性说明备注list要显示的列表的原始数据，最好是加上.sync这样可以异步传值必传scrollHeight设置scroll-view的高度，默认为屏幕高度选传deleteTap.user删除menu单击事件回调必要时传deleteLongTap.user删除menu长按事件回调必要时传editTap.user编辑menu单击事件回调必要时传editLongTap.user编辑menu长按事件回调必要时传addTap.user添加menu单击事件回调必要时传addLongTap.user添加menu长按事件回调必要时传markTap.user标记menu单击事件回调必要时传markLongTap.user标记menu长按事件回调必要时传每个点击事件或者长按事件都会返回两个参数methods = { deleteTap(view, item) { console.log(item) view.deleteItem() }, deleteLongTap(view, item) { console.log(item) wx.showModal({ title: 提示, content: 确定要删除吗？, success: function (res) { if (res.confirm) { view.deleteItem() } else { view.closeItem() } } }) } }view ：view 是SwipeDeleteView对象的本身，可以通过view来做一些其他操作，如:删除当前的itemitem : item 就是当前操作的原始数据，可以通过item获取真正需要的数据当前SwipeDeleteView对外暴露的函数有：函数名称函数说明参数deleteItem删除当前操作的item(原始数据 view)都会被删除不需要参数closeItem关闭当前操作的item，原始数据不变不需要参数网络异步加载更新如果使用的网络异步加载完成以后，还需要更新下组件，不然会出现无法侧滑的情况。导致原因：原始数据更新以后组件内部无法监听到，这样就不能获取到左右menu的宽度，所以不能侧滑解决办法：this.$invoke(swipeDelete, update); swipeDelete必须和 components = {swipeDelete: SwipeDeleteView} 同名。代码如下：// 模拟网络加载延迟2秒钟 let that = this setTimeout(function () { for (let i = 0; i < 20; i ) { let msg = {} msg.userName = 用户 (i 1) msg.msgText = 您有新的消息 msg.color = that.buildRandomColor() msg.height = that.buildRandomHeight() msg.headerImg = options.avatarUrl that.list.push(msg) } wx.hideLoading() // 更新组件 that.$invoke(swipeDelete, update) that.$apply() }, 2000)
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
相关搜索:
