微信小程序，组件style

组件的使用：

自定义组件触发事件时，需要使用 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 = {}