微信小程序:如何在一个bindchange事件中触发另一个slider改变事件?
要在一个bindchange事件中触发另一个slider改变事件,可以使用triggerEvent方法。
首先,在父组件的wxml文件中,添加一个slider组件和一个按钮组件,代码如下:
<!-- 父组件 -->
<view>
<!-- slider组件 -->
<slider bindchange='slider1Change' value='{{sliderValue1}}' />
<!-- 按钮组件 -->
<button bindtap='changeSlider2'>改变slider2的值</button>
<!-- 子组件 -->
<child-component bindchange='slider2Change' value='{{sliderValue2}}' />
</view>
接下来,在父组件的js文件中,编写相应的事件处理函数和触发事件的函数,代码如下:
// 父组件
Page({
data: {
sliderValue1: 0, // slider1的值
sliderValue2: 0 // slider2的值
},
// slider1的改变事件
slider1Change(e) {
this.setData({
sliderValue1: e.detail.value
});
// 触发子组件的slider2Change事件
this.selectComponent('#child').triggerEvent('change', {
value: e.detail.value
});
},
// 改变slider2的值
changeSlider2() {
this.setData({
sliderValue2: 50
});
}
});
注意,这里需要通过this.selectComponent方法获取到子组件的实例,然后调用triggerEvent方法触发事件,并传递相应的参数。
最后,在子组件的js文件中,编写相应的事件处理函数,代码如下:
// 子组件
Component({
properties: {
value: {
type: Number,
value: 0
}
},
// slider2的改变事件
methods: {
slider2Change(e) {
this.setData({
value: e.detail.value
});
}
}
});
在子组件中,通过properties定义了value属性,然后在slider2Change事件中更新了value的值。
这样,当slider1的值改变时,会触发slider1Change事件,然后在该事件中通过triggerEvent方法触发子组件的slider2Change事件,从而改变slider2的值。同时,点击按钮时,会改变slider2的值。
原文地址: https://www.cveoy.top/t/topic/iEaj 著作权归作者所有。请勿转载和采集!