微信小程序轮播图怎么自定义光标位置

本篇内容介绍了“微信小程序轮播图怎么自定义光标位置”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

如图

轮播图的光标可以用定位来改变上下左右的位置

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() {
 
  }
})

“微信小程序轮播图怎么自定义光标位置”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！