wepy定义组件,绑定事件bindchange出现事件警告
发布于 5 年前 作者 taoming 13122 次浏览 来自 问答

本人想要把swiper封装成组件,需要重写点dot点样式,所以关闭了官方的indicatorDots: false,自行绑定bindchange事件,希望在图片变换的时候能够改变自己的dot的样式

<template>
    <swiper indicator-dots="{{indicatorDots}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
            bindchange="toChange"
            class="swiper">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" style="width:100%;height:100%;"/>
        </swiper-item>
      </block>
    </swiper>
    <view class="dots">
      <block wx:for="{{imgUrls}}" wx:key="unique">
        <view class="dot {{index === swiperCurrent?'active':''}}"></view>
      </block>
    </view>
</template>
<script>
  import wepy from 'wepy'
 
  export default class Slider extends wepy.component {
    props = {
      imgUrls: {
        type: Array,
        default: []
      },
      indicatorDots: {
        type: Boolean,
        default: false
      }
    };
    data = {
      autoplay: true,
      interval: 5000,
      circular: true,
      duration: 1000,
      swiperCurrent: 0
    };
    toChange(e) {
      console.log('swiperChange');
      this.swiperCurrent = e.detail.current;
    }
  }

但是微信开发者工具调用toChange的时候报了一下错误,导致无法使用

Do not have $slider$toChange handler in current page: pages/home. Please make sure that $slider$toChange handler has been defined in pages/home, or pages/home has been added into app.json

但是如果是直接写在page,就是extends wepy.page的页面是没有问题。有什么办法能让组件能自己管理这个事件吗

回到顶部