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


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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
vue实现购物车结算功能
Jun 18 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
一个MYSQL操作类
2006/11/16 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js简单抽奖代码
2015/01/16 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
python中__call__方法示例分析
2014/10/11 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
总经理职责
2013/12/22 职场文书
高中生物教学反思
2014/02/05 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python