方法/步骤
打开微信小程序开发工具,打开已新建的或新建一个项目
请点击输入图片描述
新建一个页面文件wxml,插入一个radio-group,然后内嵌四个radio
请点击输入图片描述
保存代码并查看左侧模拟器,可以查看到一组单选按钮
请点击输入图片描述
在对应页面的JS文件中,定义单选按钮组change事件changeJa
请点击输入图片描述
保存代码并打开内置浏览器控制台,点击单选按钮,查看打印结果
请点击输入图片描述
下载WeUI文件,然后将相关的样式文件拷贝进去,然后修改界面并调用样式类
请点击输入图片描述
再次保存代码并查看左侧模拟器,可以看到单选按钮样式变成了按钮的样式
请点击输入图片描述
微信小程序radio不能使用三目运算,解决方法如下:在小程序的开发过程中,三目运算符是可以嵌套使用的,如果界面上有多个条件来区分不同样式,可以有两种实现方式,一种是用if else判断写多个组件,另一种是使用嵌套的三目运算符可以减少很多代码
项目根目录下创建 app.wxss 文件,文件定义的样式规则适用于所有页面。采用css定义样式。
小程序官方推荐使用flex布局。pages/home目录下新建home.wxss文件,文件的样式只适用于当前页面。
rpx是小程序为适应不同宽度的手机而发明的长度单位,所有手机宽度都为750rpx。
weui是腾讯官方维护的UI框架,我们可以直接拿来用。
将weui库中dist目录下的app.wxss拷贝到我们项目中的 app.wxss 中,在wxml文件中直接使用定义好的规则, 如 weui-btn 。
图片使用 image 标签。默认宽度为屏幕宽度。
图片轮播使用 swiper 标签。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)