The WeChat applet customizes the bottom indicator point of the swiper (the indicator point is not inside the swiper element)

Implement a demo of a small program swiper pointing at the bottom, and there is a corresponding text explanation on each picture.

Renderings:

Note: The code is written in the mpvue framework, which is different from the original one, but the principle is the same, and it is an event provided by the applet. Native means that the setting value is different from the binding dynamic style.

Notes for native use

At first, I planned to use css to control the style, and then found that the content of the element beyond the swiper would be hidden. Then I tried it, and it felt a bit troublesome. I found that the component provided me with an event, and I could use this event. , directly define an indicator point. I feel that this is more direct, so I used this method.

upper code

<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>
    <!-- 自定义指示点dot -->
    <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>

After finishing it, I found that there is another way of thinking, let the height of the img be smaller, and the height of the swiper-item be higher, and then the original indicator point will automatically heat up, and it seems to have this effect. But I didn't try it later, you can try it if you are interested. Leave a message if you can, I think this seems to be easier. There is no need to write so much, embarrassing.

The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.

There is no limit to learning! Work hard, encourage each other!