微信小程序实现轮播图指示器


Posted in Javascript onJune 25, 2022

本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下

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.实现效果

微信小程序实现轮播图指示器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。


Tags in this post...

Javascript 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
微信小程序排坑指南详解
May 23 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 #Javascript
JavaScript设计模式之原型模式详情
Jun 21 #Javascript
js前端设计模式优化50%表单校验代码示例
微前端qiankun改造日渐庞大的项目教程
Jun 21 #Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 #Javascript
You might like
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
Javascript Global对象
2009/08/13 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python实现的建造者模式示例
2018/08/06 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
利用python实现周期财务统计可视化
2019/08/25 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书