uniapp的折叠面板@change事件,让另一个按钮控制折叠面板
时间: 2023-12-06 17:45:46 浏览: 143
vue下的@change事件的实现
可以通过给另一个按钮绑定点击事件,在点击事件中调用 `uni.$emit()` 方法触发自定义事件来控制折叠面板的展开与收起。
具体实现步骤如下:
1. 在折叠面板组件上添加 `@change` 事件监听器,该事件会在折叠面板展开或收起时被触发,可以通过 `$event` 参数获取当前的展开状态。
```html
<uni-collapse v-model="isCollapse" @change="onCollapseChange">{{ content }}</uni-collapse>
```
2. 在事件处理方法中记录当前的展开状态。
```javascript
export default {
data() {
return {
isCollapse: false
}
},
methods: {
onCollapseChange(event) {
this.isCollapse = event.detail.value;
}
}
}
```
3. 给控制按钮绑定点击事件,在点击事件中调用 `uni.$emit()` 方法触发自定义事件来控制折叠面板的展开与收起。
```html
<view @tap="toggleCollapse">{{ isCollapse ? '收起' : '展开' }}</view>
```
```javascript
export default {
methods: {
toggleCollapse() {
uni.$emit('toggle-collapse');
}
}
}
```
4. 在页面的 `onLoad` 生命周期函数中监听自定义事件,并在事件处理方法中根据当前的展开状态控制折叠面板的展开与收起。
```javascript
export default {
onLoad() {
uni.$on('toggle-collapse', () => {
this.isCollapse = !this.isCollapse;
});
}
}
```
这样,当点击控制按钮时,就会触发自定义事件来控制折叠面板的展开与收起。
阅读全文