How to customize cursor position in wechat applet rotation chart

How to customize the cursor position in the wechat applet rotation chart

This article introduces “ How to customize the cursor position in the wechat applet rotation chart ” Knowledge about , During the operation of the actual case , Many people will encounter such difficulties , Next, let Xiaobian lead you to learn how to deal with these situations ！ I hope you will read carefully , Be able to learn ！

Pictured

The cursor of the rotation chart can be positioned to change the up, down, left and right positions

wxml:

<!--start banner   --><swiper class='home-swiper' autoplay='true' bindchange='changDot' interval='4000'>  <!--  Set up autoplay , Switching interval -->  <swiper-item wx:for="{{slider}}" wx:for-index="index" wx:key="slider">    <image src='{{item.img}}'></image>  </swiper-item></swiper><!--  Carousel cursor  --><view class="dots">  <block wx:for="{{slider}}" wx:key="slider">    <view class="dot {{index == swiperCurrent?'actives':''}}"></view>  </block></view><!-- end banner -->

wxss:

/*  Carousel picture size  */ .home-swiper {  width: 100%;  height: 350rpx;  position: relative;} .home-swiper image {  width: 100%;  height: 100%;} /*  The rotation chart indicates the point  */ .dots {  display: flex;  flex-direction: row;  position: absolute;  top: 311rpx;  width: 100%;  height: 50rpx;  justify-content: center;} .dots .dot {  width: 20rpx;  height: 20rpx;  /* background-color: #333; */  /* border: 1rpx solid #e8672e; */  margin-left: 12rpx;  background: #fff;  border-radius: 20rpx;  /* transform: all 0.6; */  opacity: 0.44;} /*  Called css effect  */ .dots .actives {  background-color: #fff;  opacity: 1;}

js:

Page({   /**   *  Initial data of the page    */  data: {    swiperCurrent: 0,    slider :[      {'img':'/img/img/1.jpg'},      { 'img': '/img/img/1.jpg' },      { 'img': '/img/img/1.jpg' },      { 'img': '/img/img/1.jpg' },      { 'img': '/img/img/1.jpg' }    ]  },  //  Carousel subscript   changDot(e) {    this.setData({      swiperCurrent: e.detail.current    });  },  /**   *  Life cycle function -- Monitor page loading    */  onLoad: function(options) {   },   /**   *  Life cycle function -- Listening page first rendering completed    */  onReady: function() {   },   /**   *  Life cycle function -- Monitor page display    */  onShow: function() {   },   /**   *  Life cycle function -- Monitor page hidden    */  onHide: function() {   },   /**   *  Life cycle function -- Monitor page uninstall    */  onUnload: function() {   },   /**   *  Page related event handler -- Monitor user pull-down action    */  onPullDownRefresh: function() {   },   /**   *  Handling function of page pull bottom event    */  onReachBottom: function() {   },   /**   *  Users click the upper right corner to share    */  onShareAppMessage: function() {   }})

“ How to customize the cursor position in the wechat applet rotation chart ” That's all for , Thanks for reading . If you want to know more about the industry, you can pay attention to Yisu cloud website , Xiaobian will output more high-quality practical articles for you ！