第微信小程序輪播圖自定義光標(biāo)位置本文實例為大家分享了微信小程序輪播圖自定義光標(biāo)位置的具體代碼，供大家參考，具體內(nèi)容如下

如圖

輪播圖的光標(biāo)可以用定位來改變上下左右的位置

wxml:

!--startbanner

--

swiperautoplay='true'bindchange='changDot'interval='4000'

!--設(shè)置自動播放，切換間隔時間--

swiper-itemwx:for="{{slider}}"wx:for-index="index"wx:key="slider"

imagesrc='{{item.img}}'/image

/swiper-item

/swiper

!--輪播圖光標(biāo)--

view

blockwx:for="{{slider}}"wx:key="slider"

viewclass="dot{{index==swiperCurrent'actives':''}}"/view

/block

/view

!--endbanner--

wxss:

/*輪播圖圖片尺寸*/

.home-swiper{

width:100%;

height:350rpx;

position:relative;

.home-swiperimage{

width:100%;

height:100%;

/*輪播圖指示點*/

.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:1rpxsolid#e8672e;*/

margin-left:12rpx;

background:#fff;

border-radius:20rpx;

/*transform:all0.6;*/

opacity:0.44;

/*調(diào)用的css效果*/

.dots.actives{

background-color:#fff;

opacity:1;

}

js:

Page({

/**

*頁面的初始數(shù)據(jù)

*/

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'}

]

//輪播圖下標(biāo)

changDot(e){

this.setData({

swiperCurrent:e.detail.current

});

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

/**

*生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload:function(){

/**

*頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh:function(){

/**

*頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom:function(){