问题如题。在wxml没有相关点的xwml,不知道class是什么,请问如何修改样式?感谢!
人生最曼妙的风景,竟是内心的淡定与从容!
学小程序时写过一个B站demo,也遇到此问题,最后自定义Swiper的Dot来实现了。思路是:用view组件重写dot,给swiper组件绑定bindchange事件用来获取当前第几个dot,动态改变class。
bindchange
<!-- 滚动广告 begin --> <view class="slider-wrapper"> <swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="*this"> <swiper-item> <image src="{{item}}" class="slide-image"/> </swiper-item> </block> </swiper> <view class="swipe-btn-wrapper"> <view class="swipe-btn-list"> <view class="{{dotsClass[0]}}"></view> <view class="{{dotsClass[1]}}"></view> <view class="{{dotsClass[2]}}"></view> <view class="{{dotsClass[3]}}"></view> <view class="{{dotsClass[4]}}"></view> </view> </view> </view> <!-- 滚动广告 end -->
data: { // 是否显示面板指示点 indicatorDots: false, // 是否自动切换 autoplay: true, // 自动切换时间间隔 interval: 5000, // 滑动动画时长 duration: 1000, dotsClass: ['on','','','',''] }, swiperChange: function(event) { var dotsClass = ['','','','','']; dotsClass[event.detail.current] = 'on'; console.log( event.detail.current ); console.log( dotsClass ) this.setData({ dotsClass: dotsClass }); }
全部代码:https://git.oschina.net/xujia...
学小程序时写过一个B站demo,也遇到此问题,最后自定义Swiper的Dot来实现了。
思路是:用view组件重写dot,给swiper组件绑定
bindchange
事件用来获取当前第几个dot,动态改变class。全部代码:https://git.oschina.net/xujia...