微信小程序輪播圖自定義光標位置
本文實例為大傢分享瞭微信小程序輪播圖自定義光標位置的具體代碼，供大傢參考，具體內容如下
如圖
輪播圖的光標可以用定位來改變上下左右的位置
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() {
}
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。