微信小程序轮播图怎么自定义光标位置
导读：本文共1419.5字符，通常情况下阅读需要5分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 如图轮播图的光标可以用定位来改变上下左右的位置wxml:<!--startbanner--><swiperclass='home-swiper'autoplay='true'bindchange='changDot'interval='4000'><!--设置自动播... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。如图
轮播图的光标可以用定位来改变上下左右的位置
wxml:
<!--startbanner--><swiperclass='home-swiper'autoplay='true'bindchange='changDot'interval='4000'><!--设置自动播放，切换间隔时间--><swiper-itemwx:for="{{slider}}"wx:for-index="index"wx:key="slider"><imagesrc='{{item.img}}'></image></swiper-item></swiper><!--轮播图光标--><viewclass="dots"><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;}/*调用的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(){}}) </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
微信小程序轮播图怎么自定义光标位置的详细内容，希望对您有所帮助，信息来源于网络。