今天这篇给大家分享的知识是“小程序轮播指示器的实现有哪些要点，详细如何做呢”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“小程序轮播指示器的实现有哪些要点，详细如何做呢”文章能帮助大家解决问题。

1.文件目录

2.轮播图页面布局

需求：自定义轮播指示器：当轮播图发生变化时，自定义轮播指示器跟随图片发生对应改变

bindchange:current 改变时会触发 change 事件，即当图片索引发生变化时触发的事件

current：当前所在滑块的 index (number类型)

autoplay: 是否自动切换

interval: 自动切换时间间隔

circular: 是否采用衔接滑动

<view class="swiper">
<!-- bindchange:current 改变时会触发 change 事件-->
  <swiper bindchange="change" autoplay interval="{{1500}}" circular>
    <swiper-item wx:key="*this" wx:for="{{banners}}">
      <image src="{{item}}" style="height: 150px;" />
    </swiper-item>
  </swiper>
  <!-- 轮播图指示器 -->
  <view class="dot">
  <!-- 
    index:小圆点的索引
    current：图片的索引
   -->
    <text wx:key="this" wx:for="{{4}}"  class="{{index===current?'active':''}}"></text>
  </view>
</view>

3.轮播图样式文件

.swiper {
  position: relative;
}
 
.dot {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 25rpx;
  bottom: 20rpx;
}
 
.dot text {
  width: 80rpx;
  height: 25rpx;
  border-radius: 20rpx;
  background: peachpuff;
  margin-right: 10rpx;
}
 
/* 小圆点高亮显示 */
.dot text.active{
  background: red;
}

4.轮播图逻辑实现

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    // 用于记录小圆点的索引
    current:0,
    // 轮播图数据
    banners: [
      '../../assets/banners/01.jpg',
      '../../assets/banners/02.jpg',
      '../../assets/banners/03.jpg',
      '../../assets/banners/04.jpg'
    ]
  },
 
  // 图片切换处理事件
  change(e) {
    // e.detail.current：小圆点的索引
    // 更新数据
    this.setData({current:e.detail.current});
  } 
})

5.实现效果

以上就是关于“小程序轮播指示器的实现有哪些要点，详细如何做呢”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• elementUI怎样制作级联选择器，步骤过程是什么

  这篇文章主要为大家详细介绍了elementUI实现级联选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• jQuery中去掉html标签的代码是什么

  jq去掉html标签的方法：1、使用remove()，语法“$("选择器").remove()”；2、使用empty()，语法“$("选择器").empty()”；3、使用detach()，语法“$("选择器").detach()”。

• 彩色圆圈序号列表怎样用js实现

  我们经常能在一些网站页面上看到圆圈序号列表，也就是带圆圈的需要，这样的序号列表能增加网页的美观性，那么圆圈序号列表怎样用js实现呢？下面就给大家分享一个JS实现彩色圆圈序号列表的实例。

• Vue自定义指令怎样写，相关知识点有哪些

  这篇文章主要为大家介绍了Vue自定义指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• vue中全局引入和局部引入的实现方式是什么

  vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于vue3集成Element-plus实现按需自动引入组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下