找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序左滑操作的自定义组件,小程序开发项目常用

  [复制链接]
查看: 4065|回复: 354
最佳答案
0 

2

主题

2

帖子

60

积分

新人求带

积分
60
 楼主| 发表于 2019-1-16 14:46:16 | 显示全部楼层 |阅读模式
一个小程序左滑效果(支持按钮组自定义)

demo1.gif

使用规范

引入组件
  1. {
  2.   "usingComponents": {
  3.     "slip": "/components/slip/slip"
  4.   }
  5. }
复制代码

使用组件
wxml部分(pro_msg,为需要左划操作的数组,可自行修改)
  1. <slip wx:for="{{pro_msg}}" wx:key="{{index}}" id="slip{{index}}" bind:opened="opend" data-opend = "{{index}}">
  2. <view slot="slip-center">
  3.   <!--正文显示部分-->
  4. </view>
  5. <view slot="slip-control" class="slip-control">
  6.   <!--按钮组部分-->
  7. </view>
复制代码

js部分
  1. // this.data.pro_msg为需要左划删除的数组列表
  2. // 因微信自定义组件不能自己监听数据变化,所以在自己需要重置显示状态时候,请调用`this.refresh()`方法手动触发重置。
  3. refresh(i){
  4.   if (this.data.pro_msg && this.data.pro_msg.length>0){
  5.     this.data.pro_msg.map((item,index)=>{
  6.       if(i!==index){
  7.         this.selectComponent(`#slip${index}`) && this.selectComponent(`#slip${index}`).refresh()
  8.         // 调用组件内部分`refresh`方法
  9.         // 只改变组件显示状态,不支持动态改变组件相关信息,如按钮组的宽度等信息
  10.         // 如果需要改变的话,需要重新渲染,请调用`init`方法.
  11.       }
  12.     })
  13.   }
  14. },
  15. opend(e){
  16.   // 只允许同时打开一个左划删除组件,当打开一个组件时,其他组件将关闭。不使用可以删除
  17.   this.refresh(e.currentTarget.dataset.opend)
  18. },
复制代码

WeChatApp-slip-master.zip (1.21 MB, 下载次数: 73)
回复

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:42 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:42 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1053

帖子

432

积分

新人求带

积分
432
发表于 2019-1-17 18:05:43 | 显示全部楼层
感谢楼主分享,支持一下!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com