当前位置:首页 >> 编程开发 >> 微信小程序 >> 内容

微信小程序开发——修改小程序原生checkbox、radio默认样式

时间:2020/2/29 20:25:33 作者:平凡之路 来源:xuhantao.com 浏览:

复选框:

闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的:

需要的是这样的:

示例代码:

复制代码
/*复选框外框样式*/ checkbox .wx-checkbox-input {   width: 40rpx;   height: 40rpx;   border: 4rpx solid #999;   border-radius: 100%;
}/*复选框外框选中样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {   border-color: #3cbcee;
}/*复选框选中后内部样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {   width: 60%;   height: 60%;   background: #3cbcee;   border-radius: 100%;   content: '';   transform: translate(-50%, -50%) scale(1);   -webkit-transform: translate(-50%, -50%) scale(1);
}
复制代码

注:复选框选中后内部样式部分,最后两行样式一定要有,不然复选框选中后内部的圆点会不居中(而且不太好调),具体的就不细说了,有兴趣的可以试试:

  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);

如上,还是跟我们修改html原生标签样式是一样的,只不过我们不了解小程序这些原生组件的内部结构罢了。

单选按钮:

仍旧按上面的样式修改,代码如下:

复制代码
/* 单选按钮样式*/ radio .wx-radio-input {   width: 40rpx;   height: 40rpx;   border: 4rpx solid #999;   border-radius: 100%;   background: none;
}/*单选按钮选中后内部样式*/ radio .wx-radio-input.wx-radio-input-checked {   border: 4rpx solid #3cbcee!important;
} radio .wx-radio-input.wx-radio-input-checked::before {   width: 60%;   height: 60%;   background: #3cbcee;   border-radius: 100%;   content: '';   transform: translate(-50%, -50%) scale(1);   -webkit-transform: translate(-50%, -50%) scale(1);
}
复制代码

如上,样式代码跟复选框的基本一致,直接将checkbox换为radio就可以了。但是有一个地方不一样,就是单选按钮选择后的外框样式需要添加 !Important ,不然不会生效的。

如果需要添加禁用标志,也是可以自定义的:

复制代码
radio.disabled .wx-radio-input {   width: 40rpx;   height: 40rpx;   border: 4rpx solid #eee;   border-radius: 100%;   background: none;
}
复制代码

总结:

虽然官方没有提供原生组件样式修改的入口,但是微信小程序基于微信内置浏览器的X5内核(其实就是Chrome内核),小程序在某些方面和html是很类似的。从上边的例子也可以看出,小程序原生checkbox组件内部是封装了一些我们看不到的东西的,只要我们了解了原生组件内部构造,就可以直接修改组件样式。

目前还没找到有关小程序组件内部类名的相关文档,但感觉可以从小程序编译包中应该有迹可循的,感兴趣的可以去了解下:https://www.cnblogs.com/xyyt/p/9523902.html

后记:

对于复选框、单选按钮这些组件,在编码实现的时候,会涉及到组件的选中、非选中、禁用状态,非禁用状态可能会有默认选择第一个选项,一般情况下的编码如下:

<radio wx:if="{{item.isSelect==0}}" class='vc {{cardDetail.status!=1||cardDetail.payStatus==0?"disabled":""}}' 
       color="white" disabled='{{cardDetail.status!=1||cardDetail.payStatus==0}}' value="{{index}}" checked='{{index==fatherRightsCheckIndex}}' />

如上,所有的状态、属性都在一个组件中实现,可以发现判断条件会比较多,如果后续有改动,那么改动的地方就比较多了。我们可以对这段代码进行优化如下:

<block wx:if="{{item.isSelect==0}}">     <radio wx:if="{{cardDetail.status!=1||cardDetail.payStatus==0}}" class='vc disabled' disabled='true' />     <radio wx:else class='vc' color="white" value="{{index}}" checked='{{index==fatherRightsCheckIndex}}' /> </block>

如上,代码并没有增加多少,但是代码结构清晰多了,即使后续有改动,改动起来也很方便的。

  • 上一篇:微信小程序 View:flex 布局
  • 下一篇:没有了
  • 共有评论 0相关评论
    发表我的评论
    • 大名:
    • 内容:
    本类推荐
    • 暂无信息
    本类固顶
    • 暂无信息
  • 涛涛知识分享网(www.xuhantao.com) © 2020 版权所有 All Rights Reserved.
  • 部分内容来自网络,如有侵权请联系站长尽快处理 站长QQ:965898558(广告及站内业务受理) 备案号:蒙ICP备15000590号