微信小程序事件分类、数据驱动、语法参考及tabBar配置

* 事件分类

1. 冒泡事件（bind进行绑定:例bind:tap）：当一个事件被触发后会向父节点传递
2. 非冒泡事件（catch进行绑定:例catch:tap）: 当一个事件被触发后不会向父节点传递

* 事件类型

touchstart 手指触摸开始
touchmove  手指触摸后移动
touchcancel 手指触摸动作被打断，如电话来电提醒，弹窗
touchend  手指触摸结束
tap  手指轻点，触摸后马上离开
longpress  长按事件

* 数据驱动

通过将数据定义在data中，然后使用setData来进行改变数据，更新视图

page({
    data(){
        text:'原始数据'
    },
    fnc(){
        this.setData({
            text:'改变数据'
        })
    }
})

动态属性：也是使用{{}}进行绑定

 <text catch:tap="taplogFuc" style="color: {{col}};">非冒泡事件</text>

* 条件判断 wx:if

直接将页面元素移除

 <text bindlongpress="taplogFuc" wx:if="{{isShow}}">长按事件</text>

* 循环 wx:for

默认自带index、item两个属性 修改index属性名 wx:for-index="i" 修改item属性名 wx:for-item='q'

1.循环一般数组
//如果循环的item为数字和字符串时，wx:key不能直接绑定item，需要用*this去代替item
<view wx:for="{{arr}}" wx:for-item='q' wx:for-index="i" wx:key="*this">
  <text > 循环{{i}}----{{q}}</text>
</view>

2.循环数组对象
//wx:key绑定数组对象属性可以直接写属性名
<view wx:for="{{arrObj}}" wx:key="id">
  <text > 循环{{item.id}}----{{item.name}}</text>
</view>

* 表单

input值绑定：通过data定义一个变量，接收input输入时改变的值

<input bindinput="inputFnc"/>

* tabBar配置

app.json

"tabBar":{

"color":"默认文字颜色",

"selectedcolor":"选中文字颜色",

"list": [ //底部导航对象，一般默认2-5个

{

"text":"按钮文字",

"pagePath":"pages/xxxx/xxxx" //页面切换路径,

"iconPath":"图标路径"，//大小不能超过40k

"selectedIconPath":"选中图标路径"

}

]

}