微信小程序自定义轮播图指示点

最新推荐文章于 2024-05-14 02:44:36 发布

「已注销」

最新推荐文章于 2024-05-14 02:44:36 发布

阅读量3k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：小程序

本文链接：https://blog.youkuaiyun.com/mycocoo/article/details/107864465

emmm先上效果图

在这里插入图片描述

微信小程序的swiper组件默认的指示点是小圆点，然后也不能修改它的大小和形状。

当然有时候我们希望更多样话，能够有更多的元素加载里面。

办法总比困难多，既然系统没有，那么我们就自己创一个指示点。

这就要用到swiper中的bindchange属性和current属性

在这里插入图片描述

所以，我们的中心思想就是获取当前轮播图滑块的index，然后传到js文件中，再创建一些受到js控制的视图容器，那我们就可以拥有更多样化的指示点了

//wxml
//创建一个轮播图
<swiper current="{
   
   {swiperCurrent}}" bindchange="swiperChange" circular="true">
     <swiper-item><view class="a" style="background-color: red;"></view></swiper-item

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

9
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序-swiper轮播图

ChibiMarukoChan的博客

11-05

824

效果：一般用于首页的展示页面直接附上代码：在index.wxml <view class="container"> <view class="page-body"> <view class="page-section page-section-spacing swiper"> <swiper indicator-

微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3）

2401_84910072的博客

05-17

882

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

参与评论您还未登录，请先登录后发表或查看评论

微信小程序轮播图实例：自定义指示点的样式，上下滚动

03-29

轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。废话少说，下面开始动手。业务需求： ... 轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。废话少说，下面开始动手。业务需求： 5个图片轮番播放，可以左右滑动，点击指示点可以切换图片重点说明：由于微信小程序，整个项目编译后的大小不能超过1M (此图片来源于网络，如有侵权，请联系删除! ) 查看做轮播图功能的一张图片大小都已经有100+k了 (此图

微信小程序轮播图指示点自定义（修改原生指示点样式）

苏苏就是小苏苏的博客

07-06

2040

1.实现效果 2.实现原理修改swpier原生指示点的样式。 .wx-swiper-dots.wx-swiper-dots-horizontal .wx-swiper-dot .wx-swiper-dot::before .wx-swiper-dot-active 3.完整代码（更多代码请移至码云） https://gitee.com/susuhhhhhh/wxmini_demo 喜欢的就star+关注一下~ 4.主要代码 css样式： /* pages/dots/index2.wxss */ /*

微信小程序 — 自定义轮播图的面板指示点样式

棒怡情的专栏

06-02

1800

微信小程序 — 自定义轮播图的面板指示点样式

HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量）（一）

2401_84149256的博客

05-14

1073

微信小程序自定义轮播图(常用四种效果)

09-26

微信小程序常用轮播图，常见四种轮播图，效果和PC的一样，常见的四种，可以自己修改……………………………………………………………………………………………………………………

微信小程序自定义轮播图

12-29

本文实例为大家分享了微信小程序自定义轮播图展示的具体代码，供大家参考，具体内容如下默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。首先当然是...

微信小程序——swiper轮播图自定义指示样式

qq_43201350的博客

08-17

520

微信小程序——swiper轮播图自定义指示样式

小程序swiper自定义指示点样式

weixin_42941628的博客

04-17

583

【代码】小程序swiper自定义指示点样式。

自定义swiper面板指示点的样式，image图片自适应宽度比例显示

03-29

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序自定义swiper轮播图面板指示点|小圆点|进度条

热门推荐

weianl的博客

12-12

2万+

描述：在工作中开发一个页面，多少都会用到轮播图，但是由于微信官方提供的轮播图swiper组件局限性太大了，所以接下来我会教大家怎么去自定义轮播图的进度条。简单修改：如果你的项目只是简单的修改小圆点的颜色，那么只需要修改官方提供的indicator-color和indicator-active-color参数就可以了属性类型默认值说明 indicator-color

微信小程序: 轮播图组件swiper自定义指示点样式

酷伊奥

07-19

2059

一、首先我们先去到微信官方文档，引入swiper组件 <block> <swiper class="swiper_wrapper" indicator-dots> <block wx:for="{{XXX}}" wx:key="index"> <swiper-item> <image src="{{item.XXX}}"></image> </swiper

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

dreamimport的博客

12-02

974

微信小程序自带的轮播图小点，是一个圆点且在图片上展示，不美观。上图为自定义后的轮播图效果代码如下： wxhtml：  <view class="lbt"> <swiper class="banner-list" style="height:100%;" circular="{{circular}}" indicator-...

小程序自定义swiper轮播图的进度条指示点

ahwangzc的博客

02-08

662

自定义轮播图的进度条

修改小程序swiper轮播指示点样式

h5wangbq的博客

12-24

1102

小程序swiper指示点样式修改part3就是父盒子盒子，这个随意，这就是要设定的轮播的盒子就行 part3就是父盒子盒子，这个随意，这就是要设定的轮播的盒子就行 .part3 .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: 2rpx; } .part3 .wx-swiper-dot{ //指示器大小等 ...

微信小程序自定义轮播图指示点（新建指示点）

苏苏就是小苏苏的博客

06-15

671

1.效果图 2.代码 <view class="top"> <swiper current="{{swiperCurrent}}" bindchange="swiperChange" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{goodsInfo.imgList}}"> <

swiper指示点在图下面_微信小程序开发之视图容器swiper

weixin_39789094的博客

11-25

780

视图容器swiper是微信小程序提供的内置图片轮播组件，用它可以实现广告横向、纵向切换播放，滑动导航条等各种效果。滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。官网说明地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html经过测试发现,图片地址可以外部引用也可以写本...

微信小程序自定义轮播图小点

最新发布

01-08

### 微信小程序自定义轮播图小点样式实现方法在微信小程序中，默认的 `swiper` 组件指示点（dots）是黑色灰色的小圆点，这可能无法满足一些开发者的需求。为了实现不同样式的指示点，如其他颜色、形状等，可以按照以下方式来自定义这些属性。 #### 修改默认样式通过设置 `indicator-dots-style` 属性来修改指示点的颜色和大小： ```css /* wxss 文件 */ .swiper-container { position: relative; } .custom-indicator { display: flex; justify-content: center; align-items: center; margin-top: 10px; /* 根据实际布局调整间距 */ } .custom-dot { width: 8px; height: 8px; background-color: rgba(255, 255, 255, .7); border-radius: 50%; margin: 0 4px; transition: all ease-in-out 0.3s; } .active-dot { background-color: white !important; transform: scale(1.5); /* 放大选中的dot */ } ``` #### 使用 WXML 结合数据绑定动态渲染为了让指示器能够随着当前页面的变化而变化，在对应的 `.wxml` 中加入如下代码片段，并利用循环结构生成各个状态下的 dot 元素： ```html  <view class="swiper-container"> <swiper indicator-dots="{{true}}" bindchange="onSwiperChange" current="{{currentIndex}}">  </swiper> <view class="custom-indicator"> <block wx:for="{{imageUrls}}" wx:key="index"> <view class="custom-dot {{index === currentIndex ? 'active-dot' : ''}}"></view> </block> </view> </view> ``` #### JavaScript 控制逻辑最后，在 JS 部分处理滑动事件并更新视图的状态： ```javascript // js文件 Page({ data: { imageUrls: [ '/path/to/image1.jpg', '/path/to/image2.jpg', '/path/to/image3.jpg' ], currentIndex: 0, }, onSwiperChange(e) { const {current} = e.detail; this.setData({currentIndex: current}); } }) ``` 上述代码展示了如何创建一个具有自定义样式的轮播图指示点[^1]。通过这种方式不仅可以改变指示点的颜色还可以更改其尺寸和其他视觉效果，从而更好地适应不同的设计需求。