uniapp改变radio大小

- 日理万妓 2022-11-04 01:38 317阅读 0赞

半年前使用uniapp+ColorUI+安卓写了一款app，最近在进行一些优化和修改，顺便记录一下遇到的一些小问题，遇到的一些可以记录下来的优化点，其实uniapp用来做一些比较简单的app还是挺不错的，比较快捷，容易管理~~

`uni-app` 是一个使用 [Vue.js][] 开发**跨平台**应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

文档：https://uniapp.dcloud.io/

话不多说，今天遇到了一个小问题  
在默认的radio选择框里面  
![d352358dceb8a128a71af066037243f2.png][]  
我这里男生和女生的radio显得比较大，比字体都要大一点，看起来很不舒服。想要给调整小一点。一开始我就在上面加了一个宽度和高度，设置没有成功，没有反应。

后面翻看了一下官方文档，找到了一个比较简单的属性

style="transform: scale(0.77)"

于是找到代码  
直接添加了这个属性

<view class="cu-form-group">
    				<view class="title">性别</view>
    				<radio-group @change="radioChange" style="transform: scale(0.77)">
    					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">				
    							<radio style="margin-right:10px" :value="item.value" :checked="item.checked" /><span style="margin-right:10px">{
       {item.label}}</span>
    					</label>
    				</radio-group>
    			</view>

ok,保存代码  
刷新之后会发现  
radio大小就变小了  
![27261a5bb5c2429157d6a5f09df6dcab.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[Vue.js]: https://links.jianshu.com/go?to=https%3A%2F%2Fvuejs.org%2F
[d352358dceb8a128a71af066037243f2.png]: /images/20221023/8690989604624188a8744320773dc39d.png
[27261a5bb5c2429157d6a5f09df6dcab.png]: /images/20221023/522e61ff9b6b4535b41d45ff2b8e762f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221023/93a52e0956e34d17bd422928a333f1b5.png