微信小程序多个slide-view打开一个自动收起上一个(手风琴效果)

首先来说小程序we-ui提供了slide-view组件,并且给出了show属性和bindshow事件,利用好这两个就可以实现效果了(后面详细说),但是slide-view组件有个小bug,当打开过的条目再左滑打开时会有不跟手现象,查了很多地方都没细说怎么解决(本文章目的)

实现手风琴效果

wxml:

<slide-view
    wx:for="{{todoList}}"
    wx:key="id"
    mark:id="{{item.id}}"
    buttons="{{slideOptions}}"
    show="{{ showSlide == item.id }}"
    bindshow="slideShow"
>
</slide-view>

js:

slideShow(e) {
    this.setData({
      showSlide: e.mark.id
    })
}

在slide打开的时候记录id,通过判断id是否跟渲染时当前项id相同来控制开关

这里mark:id是比较新的功能,跟写data-id类似,优势在于用mark可以往子节点传递,具体可自行了解

到这里手风琴效果就完成了,但是会有一个bug,比如此时"111...."已经打开过,再打开"222....",此时再去左滑"111..."时不会跟手,而是手指离开后才打开

修改方式:

找到下载的slide-view组件(我这里是下载组件的方式使用,如果是npm的方式只能等修复了),打开wxs文件,找到innerHideButton方法,在里面加入st.out = false

跟评论区没生效的一个兄弟聊了一会,发现使用的版本有问题,要确认slide-view组件的properties支持传入show参数,在此附上weui git地址https://github.com/wechat-miniprogram/weui-miniprogram