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


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 相关文章推荐
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jQuery中的select操作详解
Nov 29 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 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
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
js 闭包深入理解与实例分析
2020/03/19 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
前台文员的岗位职责
2013/11/14 职场文书
项目合作计划书
2014/01/09 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库