
方法/步骤
打开微信小程序开发工具,打开已新建的或新建一个项目
请点击输入图片描述
新建一个页面文件wxml,插入一个radio-group,然后内嵌四个radio
请点击输入图片描述
保存代码并查看左侧模拟器,可以查看到一组单选按钮
请点击输入图片描述
在对应页面的JS文件中,定义单选按钮组change事件changeJa
请点击输入图片描隐判述
保存代码并打开内置浏览器控制台,点击单选按钮,查看打印结果
请点击输入图片描述
下载WeUI文件,然后将相关的样式文件拷贝进去,然后修改界面并调用样式类
请点击输入图片描述
再次保存代码拆携明并查看左侧模旅告拟器,可以看到单选按钮样式变成了按钮的样式
请点击输入图片描述
方法有两种:
一:采用css的zoom属性
zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状。
二:采用css3的transform:scale属性
zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊。
整体来说zoom属性与transform:scale属性主要存在如下几点差异做顷
1、zoom的缩放是相对于左上角的;而scale默认是居中缩放;
2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;
3、zoom和scale对元素的渲染计算方法可能有差异(需要自己动手,用高清图,仔细去看其中的区别)。
4、对文纯型陆字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。
最后Anne在这里建议大家如果需要在小程租和序开发中修改单选框和复选框大小最好采用transform:scale属性,因为采用css的zoom属性时,形状被改变的有些明显,体验很不好。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)