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


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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
jQuery实现文档树效果
Feb 20 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
物资采购方案
2014/06/12 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2019思想汇报范文
2019/05/21 职场文书