微信小程序輪播圖怎么自定義光標位置

本篇內容介紹了“微信小程序輪播圖怎么自定義光標位置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

如圖

輪播圖的光標可以用定位來改變上下左右的位置

wxml:

<!--start?banner???-->
<swiper?class='home-swiper'?autoplay='true'?bindchange='changDot'?interval='4000'>
??<!--?設置自動播放，切換間隔時間-->
??<swiper-item?wx:for="{{slider}}"?wx:for-index="index"?wx:key="slider">
????<image?src='{{item.img}}'></image>
??</swiper-item>
</swiper>
<!--?輪播圖光標?-->
<view?class="dots">
??<block?wx:for="{{slider}}"?wx:key="slider">
????<view?class="dot?{{index?==?swiperCurrent?'actives':''}}"></view>
??</block>
</view>
<!--?end?banner?-->

wxss:

/*?輪播圖圖片尺寸?*/
?
.home-swiper?{
??width:?100%;
??height:?350rpx;
??position:?relative;
}
?
.home-swiper?image?{
??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:?1rpx?solid?#e8672e;?*/
??margin-left:?12rpx;
??background:?#fff;
??border-radius:?20rpx;
??/*?transform:?all?0.6;?*/
??opacity:?0.44;
}
?
/*?調用的css效果?*/
?
.dots?.actives?{
??background-color:?#fff;
??opacity:?1;
}

js:

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'?}
????]
??},
??//?輪播圖下標
??changDot(e)?{
????this.setData({
??????swiperCurrent:?e.detail.current
????});
??},
??/**
???*?生命周期函數--監聽頁面加載
???*/
??onLoad:?function(options)?{
?
??},
?
??/**
???*?生命周期函數--監聽頁面初次渲染完成
???*/
??onReady:?function()?{
?
??},
?
??/**
???*?生命周期函數--監聽頁面顯示
???*/
??onShow:?function()?{
?
??},
?
??/**
???*?生命周期函數--監聽頁面隱藏
???*/
??onHide:?function()?{
?
??},
?
??/**
???*?生命周期函數--監聽頁面卸載
???*/
??onUnload:?function()?{
?
??},
?
??/**
???*?頁面相關事件處理函數--監聽用戶下拉動作
???*/
??onPullDownRefresh:?function()?{
?
??},
?
??/**
???*?頁面上拉觸底事件的處理函數
???*/
??onReachBottom:?function()?{
?
??},
?
??/**
???*?用戶點擊右上角分享
???*/
??onShareAppMessage:?function()?{
?
??}
})

“微信小程序輪播圖怎么自定義光標位置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注蝸牛博客網站，小編將為大家輸出更多高質量的實用文章！

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。