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


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 年月日联动实现核心代码
Dec 21 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
js实现盒子移动动画效果
Aug 09 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与SQL注入攻击[三]
2007/04/17 PHP
php制作文本式留言板
2015/03/18 PHP
PHP生成树的方法
2015/07/28 PHP
PHP编写简单的App接口
2016/08/28 PHP
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
javascript如何创建对象
2016/08/29 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
对Django url的几种使用方式详解
2019/08/06 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
学生实习推荐信范文
2013/11/26 职场文书
挂科检讨书范文
2014/02/20 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
读书活动总结
2014/04/28 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
创卫工作总结2015
2015/04/22 职场文书
早安问候语大全
2015/11/10 职场文书
创业计划书之家教托管
2019/09/25 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS