微信小程序自定义swiper的底部指示点（指示点不在swiper元素里面）

我就是我 2023-05-21 11:53 33阅读 0赞

实现一个小程序swiper指示点在下方的一个demo，并且在每张图片上有对应的文字释义。

效果图：  
![在这里插入图片描述][20200418210917790.gif]

#### 注意：代码是用mpvue框架写的，跟原生的有所不同，但是原理是一样的，都是用小程序提供的一个事件。原生也就是设置值和绑定动态样式不一样。 ####

![在这里插入图片描述][2020041821264946.jpg]  
原生使用的注意点  
![在这里插入图片描述][20200418212703663.jpg]  
最开始本来打算用css控制样式来实现，然后发现超出swiper元素内容会被隐藏，然后试了下，感觉有点麻烦，发现组件有提供一个事件给我，然后可以利用这一个事件，直接定义一个指示点。感觉这样更加直接，所以用的这个方式。

上代码

<template>
      <div>
        <swiper autoplay="true" circular="true" @change="swiperChange" >
          <template v-for="(item, i) in swiperData">
            <swiper-item>
              <img @change="imgChange" :src="item.img" class="indexItem" mode="aspectFill" />
              <p class="swiper-itemText">{
       {item.text}}</p>
            </swiper-item>
          </template>
        </swiper>
        
        <div class="customDots">
          <template v-for="(item, index) in swiperData">
            <div class="customDots-item" :class="{ active: swiperCurrent == index }"></div>
          </template>
        </div>
      </div>
    </template>

js

<script>
    export default { 
      data() { 
        return { 
          swiperData: [        { 
              img: "https://cdn.pixabay.com/photo/2020/03/18/05/29/swimming-pool-4942724__340.jpg",
              text: '嘟嘟第一张'
            },
             { 
              img: "https://cdn.pixabay.com/photo/2020/04/02/11/20/fungus-4994622__340.jpg",
              text: '啦啦第二张啦啦第二张啦啦第二张啦啦第二张啦啦第二张'
            },
             { 
              img: "https://cdn.pixabay.com/photo/2017/12/29/10/23/nature-3047194__340.jpg",
              text: '嘿嘿第三张'
            }
          ],
          swiperCurrent: 0,
        };
      },
      methods: { 
         //自动滑动时，获取当前的轮播对象 原生的这里设置值不一样
        swiperChange(e) { 
          this.swiperCurrent = e.mp.detail.current
        },
        //图片手动滑动时，获取当前的轮播对象
        imgChange(e) { 
          this.swiperCurrent = e.mp.detail.current
        }
      },
    };
    </script>

css

<style scoped> swiper { 
      width: 100%;
      height: 388rpx;
    }
    
    swiper-item { 
      border-radius: 14rpx;
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 388rpx;
    }
    .indexItem { 
      width: 100%;
      height: 388rpx;
    }
    
    .swiper-itemText { 
      position: absolute;
      left: 34rpx;
      bottom: 24rpx;
      font-size: 32rpx;
      width: 80%;
      color: red;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .customDots { 
      margin-top: 20rpx;
      display: flex;
      justify-content: center;
    }
    /* 不是当前状态的点 */
    .customDots .customDots-item { 
      margin: 0 8rpx;
      width: 14rpx;
      height: 14rpx;
      background-color: transparent;
      border-radius: 8rpx;
      background:red;
      transition: all 0.6s ease-in-out;
    }
    /* 当前显示点 */
    .customDots .customDots-item.active { 
      width: 30rpx;
      background: red;
    }
    </style>

做完后发现还有一种思路，让img的高小点，swiper-item的高高些，然后原本的指示点自热而然好像也变成这个效果。不过后面没去试下了，有兴趣的可以试下。可以的话留言下，感觉这个好像更简单些。还不需要写这么多，尴尬。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

[20200418210917790.gif]: /images/20230521/966fbd68d5a94172b9215b608f393c95.png
[2020041821264946.jpg]: /images/20230521/4549e8cc44164e5c9b4f08e6462e8e15.png
[20200418212703663.jpg]: /images/20230521/43a581ed8635462db9e488853d8112ae.png

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序自定义swiper的底部指示点（指示点不在swiper元素里面）

实现一个小程序swiper指示点在下方的一个demo，并且在每张图片上有对应的文字释义。效果图： ![在这里插入图片描述][20200418210917790.gif]

我就是我/ 2023年05月21日 11:53/ 0 赞/ 34 阅读

相关微信小程序自定义swiper指示灯二

不说废话了,直接上代码 wxml  <swiper class="viewpager" autoplay="{

﹏ヽ暗。殇╰゛Y/ 2023年02月10日 07:42/ 0 赞/ 28 阅读

相关微信小程序自定义swiper指示灯一

wxml <swiper class="swiper-box" indicator-dots="{ { indicatordots }}" autopl

朴灿烈づ我的快乐病毒、/ 2023年02月10日 01:19/ 0 赞/ 51 阅读

相关 swiper 底部小图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

心已赠人/ 2022年12月26日 10:21/ 0 赞/ 16 阅读

相关 UNI-APP_uni-app swiper轮播图自定义指示点样式

![在这里插入图片描述][20210602103515503.png] <view class="swiper_cent"> <swiper class

r囧r小猫/ 2022年10月17日 06:00/ 0 赞/ 1091 阅读

相关微信小程序入门实例——swiper

index.wxml <swiper class = "banner" indicator-dots="{ {indicatorDots}}" c

ゝ一世哀愁。/ 2022年06月08日 02:48/ 0 赞/ 333 阅读

相关小程序轮播指示点手动实现

由于原生的点限制太多，这里展示下，手动自己实现指示点 html  <swiper class='banner-top' indicator

灰太狼/ 2022年05月15日 10:29/ 0 赞/ 286 阅读

相关小程序自定义美化swiper组件（自定义指示点，自定义轮播样式

修改指示点修改轮播样式 1、自定义指示点 <view class="singlegraph"> <swiper class="sw

痛定思痛。/ 2021年10月01日 08:38/ 0 赞/ 763 阅读

相关 uniapp组件-uni-swiper-dot轮播图指示点

官方：[https://ext.dcloud.net.cn/plugin?id=284][https_ext.dcloud.net.cn_plugin_id_284] ![

悠悠/ 2021年07月25日 12:40/ 0 赞/ 2010 阅读

相关 uni-app 自定义轮播图 swiper 指示点位置和样式

我们在使用 uni-app 的滑块视图容器 swiper 开发 H5前端页面轮播图时，有时候需要对轮播图的指示点的位置和样式进行自定义。类似于下图：

朱雀/ 2021年03月30日 11:33/ 2 赞/ 4192 阅读