怎样查看小程序内部样式?

Question

问题描述

小程序轮播点样式更改,如何查看内部定义的样式?

问题出现的环境背景及自己尝试过哪些方法

我在引用小程序内部的swiper时,想自定义轮播点的样式,从网上找到一种方法,是修改微信里面默认的样式,然而查看元素并没有找到相关的元素,也没找到小程序内部定义的类名,例如:.wx-swiper-dots.wx-swiper-dots-horizontal

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
swiper .wx-swiper-dot{
  width:40rpx;
  display: inline-flex;
  height: 10rpx;
  margin-left: 20rpx;
  justify-content:space-between;
}
swiper .wx-swiper-dot::before{
  content: '';
  flex-grow: 1; 
  background: rgba(255,255,255,0.8);
  border-radius: 8rpx
}
swiper .wx-swiper-dot-active::before{
  background:rgba(244,0,0,0.8);   
}

你期待的结果是什么？实际看到的错误信息又是什么？

我现在想知道.wx-swiper-dots.wx-swiper-dots-horizontal是通过什么方法查看的,或者可以从哪里找到介绍的文档

Answer 1

重点看indicator-active-color='#f4d020' 这个属性

  <swiper :autoplay="true" class="swiper-box" :circular='true' :indicator-dots='true' indicator-active-color='#f4d020'>
      <div class="swiper-item">
        <swiper-item>
          <image src="https://xiaofei-1252186245.cos.ap-chengdu.myqcloud.com/my-project/event-b1.png" class="slide-image" />
        </swiper-item>
      </div>
      <div class="swiperitem">
        <swiper-item>
          <image src="https://xiaofei-1252186245.cos.ap-chengdu.myqcloud.com/my-project/event-b2.png" class="slide-image" />
        </swiper-item>
      </div>
    </swiper>