评论

官方组件默认样式修改的对应class

有时遇到需要修改组件默认样式的情况,但是wxml调试却不显示具体的元素,那就抓瞎了。把遇到的收集记录一下,怕下次又不记得。

swiper

面板指示点:

.wx-swiper-dots.wx-swiper-dots-horizontal{

margin:20px //调整位置

.wx-swiper-dot{}//指示点未选中样式

.wx-swiper-dot-active{}//指示点选中样式

button

去除边框:

button::after { border: none; }

checkbox

.wx-checkbox-input{}//未选中的框

.wx-checkbox-input.wx-checkbox-input-checked{}//选中的框

.wx-checkbox-input.wx-checkbox-input-checked::before{}//选中的框里的小勾

radio

.wx-radio-input{}// 未选中

.wx-radio-input.wx-radio-input-checked{}//选中

.wx-radio-input.wx-radio-input-checked::before{}//选中的小勾

progress

.wx-progress-inner-bar{}//已选择的进度条

switch

.wx-switch-input{}//

最后一次编辑于  2021-10-29  
点赞 14
收藏
评论

3 个评论

  • 神经蛙
    神经蛙
    2021-11-04

    如果对你有帮助,麻烦帮我点个赞;

    如果发现有问题,也麻烦你指正;

    感谢。


    2021-11-04
    赞同 7
    回复
  • 彡( ̄_ ̄;)彡
    彡( ̄_ ̄;)彡
    2022-01-25

    补充一下,radio的check状态的勾子大小用 font-size去改变

    2022-01-25
    赞同 1
    回复 1
    • 彡( ̄_ ̄;)彡
      彡( ̄_ ̄;)彡
      2022-06-30
      还补充一下,在component 样式中写无效,得在page wxss中写
      2022-06-30
      1
      回复
  • Lcall
    Lcall
    2022-06-30

    补充一个小技巧,突然发现uniApp H5版本的这些官网组件和微信官网组件实现起来是一模一样。

    1. 打开uniApp H5版本的组件官网文档(https://hellouniapp.dcloud.net.cn/pages/component/switch/switch)。
    2. 开发者打开调试模式就可以拿到各自对应的组件class,开发者可以自由发挥了。


    2022-06-30
    赞同 1
    回复
登录 后发表内容