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