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


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 相关文章推荐
jquery图片放大功能简单实现
Aug 01 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
浅谈javascript的调试
Jan 28 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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伪静态写法附代码
2008/06/20 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python如何删除文件、目录
2020/06/23 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
应届生骨科医生求职信
2013/10/31 职场文书
导游的职业规划书范文
2013/12/27 职场文书
师说教学反思
2014/02/07 职场文书
生产文员岗位职责
2014/04/05 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
先进党组织事迹材料
2014/12/26 职场文书
成绩单评语
2015/01/04 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
导游词之安徽九华山
2019/09/18 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏