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

dbt@L

于 2022-08-17 17:52:22 发布

阅读量520

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_43201350/article/details/126391325

本文介绍如何在微信小程序中针对swiper组件实现自定义的轮播图指示器样式，通过结合js和wxml文件的配置以及特定的样式设置，达到个性化展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js文件

  data: {
   
   
    styleType:1,
    pointerStyle:4,
    imageList:[
      {
   
   src:'../../static/Rectangle 6.png'},
      {
   
   src:'../../static/Rectangle 6.png'},
      {
   
   src:'../../static/Rectangle 6.png'},
    ],
    largeCurrentSwiper:0
  },
  swiperChange(e){
   
   
    this.setData({
   
   
      largeCurrentSwiper:e.detail.current
    })
  },

wxml文件

<!-- swiper 自定义指示样式 -->
<swiper class="{
  
  {styleType === 1 ? 'pointOne' : styleType === 2 ? 'pointTwo' : styleType === 3 ? 'pointThree' : styleType === 5 ? 'pointFive' : ''}}" current="{
  
  {largeCurrentSwiper}}" bindchange="swiperChange">
  <swiper-item wx:for="{
  
  {imageList}}" style="position: relative;margin: 0 9%;">
    <image src="{
  
  {item.src}}"></image>
    <!-- 其它样式 -->
    <view class="dots" style="position: