要在一个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的值。

微信小程序:如何在一个bindchange事件中触发另一个slider改变事件?

原文地址: https://www.cveoy.top/t/topic/iEaj 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录