本人想要把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的页面是没有问题。有什么办法能让组件能自己管理这个事件吗
