微信小程序多个slide-view打开一个自动收起上一个(手风琴效果)
程序员文章站
2022-06-24 16:41:35
首先来说小程序we-ui提供了slide-view组件,并且给出了show属性和bindshow事件,利用好这两个就可以实现效果了(后面详细说),但是slide-view组件有个小bug,当打开过的条目再左滑打开时会有不跟手现象,查了很多地方都没细说怎么解决(本文章目的)实现手风琴效果wxml:
首先来说小程序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
本文地址:https://blog.csdn.net/Mr_Sunset/article/details/111039447
上一篇: CSS3 Background || CSS3 背景
下一篇: GetElementByName