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


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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
VUE 全局变量的几种实现方式
Aug 22 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
Vue header组件开发详解
2018/01/26 Javascript
vue组件与复用详解
2018/04/08 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python读取Kafka实例
2019/12/23 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
实习自我鉴定模板
2013/09/28 职场文书
人事助理岗位职责
2013/11/18 职场文书
贷款承诺书范文
2014/05/19 职场文书
学习作风建设心得体会
2014/10/22 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
2014年管理工作总结
2014/11/22 职场文书
复试通知单模板
2015/04/24 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers