原生微信小程序_微信小程序原生点击事件

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
  })
}