1、点击事件:
bindtap:在普通冒泡事件的捕获阶段触发的
catchtap:阻止事件冒泡
2、数据绑定:
使用插值表达式
<view>{{info.title}}--{{info.desc}}</view>
<image src="{{imgSrc}}" alt="" />
<view>{{num}}----{{num>10?'数字大于10':'数字小于等于10'}}</view>
3、更改数据:
使用setData来更改数据
this.setData({
clickNum:this.data.clickNum+100
})
4、bindinput事件:
用于响应input框的输入事件,相当于为文本框绑定input事件,input框中的value动态绑定值
<input type="text" value="{{inputValue}}" bindinput="inputHandler" class="border-btn" />
inputHandler(e) {
console.log(e.detail.value);
}
5、控制元素显示与隐藏:
wx:if:动态创建和移除元素,控制元素显示与隐藏(控制条件复杂时建议使用wx:if搭配wx:elif和wx:else)
hidden:以切换样式的方式(display:none/block),控制元素的显示隐藏(频繁切换时建议使用hidden)
<button bindtap="change">点击改变状态
<view wx:if="{{show}}">显示</view>
<view wx:else>隐藏</view>
</button>
<view hidden="{{!show}}">条件为true显示,条件为false隐藏</view>
6、列表循环渲染:
使用wx:for渲染列表,默认索引和当前项就是index和item,使用wx:key指定唯一的key值,提高渲染效率
<view wx:for="{{list}}" wx:key="index">
index:{{index}}--item项:{{item.title}}--{{item.desc}}
</view>
索引和当前项可更改名字,使用wx:for-index和wx:for-item更名
<view wx:for="{{list}}" wx:for-index="idx" wx:for-item="value" wx:key="idx">
index:{{idx}}--item项:{{value.title}}--{{value.desc}}
</view>
7、传参
使用data-参数名=“参数”的形式传参
<button bindtap="click" data-num="12" data-title="我是标题">
点击+100--{{clickNum}}
</button>
click(e) {
console.log(e.target.dataset.num);
console.log(e.target.dataset.title);
this.setData({
clickNum: this.data.clickNum + 100
})
},
8、组件传值
父传子:
在父组件的json文件中引用子组件:
{
"usingComponents": {
"test1":"/components/test1/index"
}
}
<test1 title="{{title}}"></test1>
在子组件的js文件中properties里面接收
properties: {
title:''
},
<text>父组件传过来的title----{{title}}</text>
子传父:
在子组件的事件中使用triggerEvent自定义一个方法名传递数据
addNum(){
this.setData({
count:this.properties.count+=1
})
this.triggerEvent('sync',{value:this.properties.count})
}
在父组件中,使用bind:自定义方法名接收数据
<test1 title="{{title}}" count="{{count}}" bind:sync="syncCount"></test1>
syncCount(e){
this.setData({
console.log(e)
count:e.detail.value
})
}