组件的使用:
自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项
在对组件进行封装时
在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(’ ',{},{}),
第一个参数是自定义事件名称,这个名称是在页面调用组件时bind的名称,
第二个对象就可以将想要的属性拿到,
第三个参数文档中有介绍,有机会再做补充。
picker 从底部弹起的滚动选择器
picker
rang 获取js数组
range-key 来指定 Object 中 key 的值作为选择器显示内容
value 是选择range的第几个,获取下标从0开始
bindchange 点击下拉框(value改变),触发事件 event.detail = {value}
mode 获取选择器类型 selector普通 multiSelector多列 time时间 date日期 region省市区
wxml
<!-- mode="selector"可省略,默认为普通选择器 -->
<picker bindchange="bindyChange" value="{{NBIndex}}" range="{{NB}}" range-key ="{{'name'}}">
<view class="picker">
<text>{{NB[NBindex].name}}</text>
</view>
</picker>
js
//data下
NB:[
{
name: '科比'
},
{
name: '詹姆斯'
},
],//NB
FL:[
{
name: '汤普森'
},
{
name: '乔丹'
},
],//分类
NBindex:0,//默认显示picker的第一条数据
index:0,
//方法下
bindyChange(e) { //点击下拉框时候触发的函数
console.log(e), //e == event,点击的值 ==> e是一个对象 e{xxx:"检查统计"} xxx.value ==>
this.setData({ //只有setData方法视图层的 数据才会改变
NBIndex: e.detail.value, // e.detail.value ==> 获取对应下标console.log(e),
})
},
bindPickerChange(e) { //点击下拉框时候触发的函数
console.log(e), //e == event,点击的值 ==> e是一个对象 e{xxx:"检查统计"} xxx.value ==>
this.setData({ //只有setData方法视图层的 数据才会改变
index: e.detail.value, // e.detail.value ==> 获取对应下标console.log(e),
})
},
本次收获:
1.wxml:
- picker组件使用rang-key = “{{‘数组属性’}}”
-
{{数组[下标].数组属性}}
2.js:
- 数据显示于视图层调用setData方法 下标(key): e.detail.value
- 默认在选择框显示 定义key,并初始化的赋值 NBindex:0,
3.wxss:
- 选择框文字居中
- 父高 与 line-height: 父高
input 输入框
input
<!-- bindinput (value 改变触发)键盘输入时触发 value 实时输入的内容 type 类型-->
<input class='dam-name input' bindinput='bindKeyInput' value='{{GZZParams.GZZNAME}}' type="text"/>
属性值:
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
password:类型 布尔 是否是密码类型
placeholder:类型 字符串 输入框为空时占位符
value 实时输入的内容
事件:
bindinput: 键盘输入时触发(value 改变触发)
bindfocus: 输入框聚焦时触发
bindblur: 输入框失去焦点时触发
bindconfirm: 点击完成按钮时触发
radio 单选选项
radio
<radio-group bindchange="GGZLVLChange" class="radio-group">
<view class="weui-cell" wx:for="{{LVLList}}" wx:key="item.GZZLVL">
<view class="weui-cell__hd">
<!-- 单选项 -->
<radio value="{{item.GZZLVL}}" color="#58a3f8" checked="{{item.checked}}"/>
</view>
<!-- 文字 -->
<view class="weui-cell__bd">{{item.name}}</view>
</view>
</radio-group>
属性:
value radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value
checked true/false 单选按钮是否选中,默认false
color 按钮的颜色,不是字体的颜色
disabled 禁用
附加:单选项的显示内容都是通过,获取key值显示内容 {{ty[tyIndex]}} ty为数组tyIndex数组下标(属性)
scroll-view 可滚动视图区域
scroll-view
<scroll-view class="scroll-content" scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
</scroll-view>
属性:
scroll-x/-y 横向/纵向滚动
scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-top 设置竖向滚动条位置
事件
bindscrolltoupper 滚动到顶部/左边也可以触发
bindscrolltolower 滚动到底部/右边也可以触发
bindscroll 滚动时触发,e,detail = {}