WeChat applet modifies instance code for Swiper default indicator style

Modify the official SWIPER style

Copy the Swiper code block from the WeChat official WeChat development document center.

WXML definition

               WXSS definition style    .wrap {height: auto; position: relative; width: 100%;}. swipers {height: 350rpx; width: 100% }. Slide-image {Display: Block; Width: 100%; Height: 100%;} / * Used to package all small dots * /. dots {width: 156rpx; height: 36rpx; Display: flex; flex; -direction: rope;} / * unchecked small round dot style * /. dot {width: 26rpx; height: 26rpx; border-radius: 50%; Margin Right: 26rpx; Background-Color: White;} / * Select the subsequent small dot style * /. Active {Width: 26rpx; background-color: coORAL;}   

Page ({data: {imgUrls: [ ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’, ‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg’ , ‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg’], currentSwiper: 0, autoplay: true}, swiperChange: function (e) {this.setData ({currentSwiper: e.detail.current })}}})

The above is the instance code of the Swiper’s default indicator style described above. I hope that if you have any questions, please reply to everyone in a timely manner if you have any questions. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment