微信小程序輪播圖自定義光標(biāo)位置

更新時(shí)間：2022年06月24日 11:39:47 作者：示羊online

這篇文章主要為大家詳細(xì)介紹了微信小程序輪播圖自定義光標(biāo)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

如圖

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

wxml:

<!--start banner ? -->
<swiper class='home-swiper' autoplay='true' bindchange='changDot' interval='4000'>
? <!-- 設(shè)置自動播放，切換間隔時(shí)間-->
? <swiper-item wx:for="{{slider}}" wx:for-index="index" wx:key="slider">
? ? <image src='{{item.img}}'></image>
? </swiper-item>
</swiper>
<!-- 輪播圖光標(biāo) -->
<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%;
}
?
/* 輪播圖指示點(diǎn) */
?
.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;
}
?
/* 調(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() {
?
? },
?
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function() {
?
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: