微信小程序輪播圖自定義光標(biāo)位置
更新時(shí)間：2022年06月24日 11:39:47 作者：示羊online
這篇文章主要為大家詳細(xì)介紹了微信小程序輪播圖自定義光標(biāo)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序輪播圖自定義光標(biāo)位置的具體代碼，供大家參考，具體內(nèi)容如下
如圖
輪播圖的光標(biāo)可以用定位來(lái)改變上下左右的位置
wxml:
<!--start banner ? -->
<swiper class='home-swiper' autoplay='true' bindchange='changDot' interval='4000'>
? <!-- 設(shè)置自動(dòng)播放，切換間隔時(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({
?
? /**
? ?* 頁(yè)面的初始數(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)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function(options) {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ?*/
? onReady: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ?*/
? onHide: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ?*/
? onUnload: function() {
?
? },
?
? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function() {
?
? },
?
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {
?
? },
?
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function() {
?
? }
})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6學(xué)習(xí)筆記之let與const用法實(shí)例分析
這篇文章主要介紹了ES6學(xué)習(xí)筆記之let與const用法,結(jié)合實(shí)例形式分析了ES6中l(wèi)et與const的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
本篇文章給大家詳細(xì)介紹了javascript中的隱式調(diào)用相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的可以跟著小編一起學(xué)習(xí)下。2018-02-02
Javascript數(shù)組的?splice?方法詳細(xì)介紹
這篇文章主要介紹了Javascript數(shù)組的splice方法詳細(xì)介紹，splice方法通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組2022-09-09
Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果，無(wú)過(guò)渡動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
es6數(shù)組includes()用法實(shí)例分析
這篇文章主要介紹了es6數(shù)組includes()用法,結(jié)合實(shí)例形式分析了es6數(shù)組includes()針對(duì)給定值判斷的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)彈動(dòng)小球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解webpack打包第三方類庫(kù)的正確姿勢(shì)
這篇文章主要介紹了詳解webpack打包第三方類庫(kù)的正確姿，我們主要介紹了webpack.optimize.CommonsChunkPlu，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
詳解GoJs節(jié)點(diǎn)的折疊展開(kāi)實(shí)現(xiàn)
這篇文章主要為大家介紹了GoJs節(jié)點(diǎn)的折疊展開(kāi)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
這篇文章主要介紹了js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法,涉及javascript中onchange事件及頁(yè)面元素遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了詳解微信小程序的 request 封裝示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08