小程序自定义轮播图圆点组件


Posted in Javascript onJune 25, 2022

本文实例为大家分享了小程序自定义轮播图圆点组件的具体代码,供大家参考,具体内容如下

小程序自定义轮播图圆点组件

微信小程序自带的轮播图小点,是一个圆点且在图片上展示,不美观。上图为自定义后的轮播图效果

代码如下:

wxhtml:

<!-- 轮播图 -->
    <view class="lbt">
      <swiper class="banner-list" style="height:100%;" circular="{{circular}}" indicator-dots='' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange"> 
        <block wx:for="{{imgUrls}}" wx:key='{{item.id}}'>
          <swiper-item>
            <image src="{{urls}}{{item.image}}" class="slide-image" width="100%" />
          </swiper-item>
        </block>
      </swiper>
      <!-- 这里是自定义控制组件的模块 -->
      <view class="dots">
      <block wx:for="{{imgUrls}}" wx:key="{{item.id}}">
      <!-- 循环图片张数有多少张图片就有多少个小点 -->
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
      </view>
    </view>
  </view>

wxjs:

// 轮播图片改变时,小圆点也改
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

wxcss:

.lbt {
  position: relative;
  width: 100%;
  height: 300rpx;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}
.lbt .dots{
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
}
.lbt .dots .dot{
margin: 0 6rpx;
width: 18rpx;
height: 10rpx;
background: #A2A2A2;
border-radius: 6rpx;
transition: all .6s;
}
.lbt .dots .dot.active{
width: 30rpx;
height: 10rpx;
background:#3d3d3d;
}

.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。


Tags in this post...

Javascript 相关文章推荐
jquery实现智能感知连接外网搜索
May 21 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
微信小程序实现轮播图指示器
Jun 25 #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
You might like
第七节--类的静态成员
2006/11/16 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
python之import机制详解
2014/07/03 Python
python实现基本进制转换的方法
2015/07/11 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python with语句的原理与用法详解
2020/03/30 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
自荐信格式
2013/12/01 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
创业计划书之面包店
2019/09/12 职场文书