
方法/步骤
打开微信小程序开发工具,打开已新建的或新建一个项目
请点击输入图片描述
新建一个页面文件wxml,插入一个radio-group,然后内嵌四个radio
请点击输入图片描述
保存代码并查看左侧模拟器,可以查看到一组单选按钮
请点击输入图片描述
在对应页面的JS文件中,定义单选按钮组change事件changeJa
请点击输入图片描述
保存代码并打开内置浏览器控制台,点击单选按钮,查看打印结果
请点击输入图片描述
下载WeUI文件,然后将相关的样式文件拷贝进去,然后修改界面并调用样式类
请点击输入图片描述
再次保存代码并查看左侧模拟器,可以看到单选按钮样式变成了按钮的样式
请点击输入图片描述
1.基础组件:
什么是组件:
<ul>
<li>组件是视图层的基本组成单元。</li>
<li>组件自带一些功能与微信风格的样式。</li>
<li>一个组件通常包括开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。</li>
</ul>
2.属性类型
<ul>
<li>Boolean布尔值组件写上该属性,不管该属性等于什么,其值都为true
,只有组件上没有写该属性时,属性值才为false
。如果属性值为变量,变量的值会被转换为Boolean类型</li>
<li>Number数字1
, 2.5</li>
<li>String字符串"string"</li>
<li>Array数组[ 1, "string" ]</li>
<li>Object对象{ key: value } </li>
<li>EventHandler事件处理函数名"handlerName"
是 Page中定义的事件处理函数名</li>
<li>Any任意属性</li>
</ul>
3.共同属性类型
id , class , style , hidden , data-* , bind* / catch*
4.特殊属性
几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰
5.组件列表
基础组件分为以下八大类:
视图容器(View Container):
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器
基础内容(Basic Content):
icon 图标, text 文字, progress 进度条
表单(Form):
button 按钮, form 表单, input 输入框, checkbox 多想选择器, radio 单选器, picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签.
*** 作反馈(Interaction)
action-sheet 上拉菜单
modal 模态d窗
toast 消息提示框
loading 加载提示符
导航Navigation
navigator 应用链接
多媒体(Media)
audio 音频, image 图片, video 视频
** 地图 **
map 地图
画布Canvas
canvas 画布
flex: vt.折曲,使收缩; vi.玩去,收缩
有两种获取方法:
1. 在所有单选按钮组外边套一个 form 组件,并且加一个包含属性 formType="submit" 的
button 按钮,每组单选按钮的 name 使用你的 data-index,选择完闭后点击按钮,在
bindsubmit 绑定的方法中可以获取到所有值:
formSubmit(event) {
const values = event.detail.value
const result = Object.keys(values).sort().map(key => values[key])
console.log(result)// 此时的 result 就是一个按顺序(name)排序的
}
2. 使用 radio-group 的 bindchange,设置值时用 data-index 确定位置。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)