打开微信小程序开发工具,打开已新建的或新建一个项目,新建一个页面文件wxml,插入一个radiogroup,然后内嵌四个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属性时,形状被改变的有些明显,体验很不好。
1/18点击搜索栏打开微信通讯录界面,界面选择搜索栏这一选项打开。
2/18
打开腾讯投票搜索栏输入投票,界面显示小程序腾讯投票,点击打开腾讯投票。
3/18
打开单选投票翻转进入腾讯投票界面,界面选择单选投票选项打开。
4/18
点击登录翻转进入创建单选投票界面,界面点击登录,以保证各项功能正常使用。
5/18
点击允许界面显示获取你的昵称、头像窗口,点击允许这一选项。
6/18
输入标题翻转进入创建单选投票界面,输入你的投票标题,输入补充描述。
7/18
点击完成输入你的单选投票选项,点击完成这一选项,完成单选投票的创建。
8/18
点击转发翻转界面选择分享图标点击打开,菜单栏点击转发这一选项。
9/18
点击群聊翻转进入选择一个聊天界面,界面点击你要转发的群聊。
10/18
点击发送界面显示发送给窗口,点击发送,即可 *** 作完成小程序单选投票。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)