微信小程序WXML-列表渲染与事件绑定

微信小程序WXML-列表渲染与事件绑定

1.官方文档

​ https://developers.weixin.qq.com/miniprogram/dev/component/

2.列表渲染

2.1 wx:if

​ 在框架中，使用wx:if=“” 来判断是否渲染该代码块

​ block元素可以将多个组件包装起来，使用wx:if属性， 不是一个组件，仅仅是一个包装元素

<view wx:if="{{isA}}"> 
  显示A
</view>
<view wx:if="{{isB}}"> 
  显示B
</view>
<block wx:if="{{isA}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

Page({
  data: {
    isA:false,
    isB:true
  }
  }）

2.2 wx:for

​ 控制属性绑定一个数组， 即可使用数组中的各项数据重复渲染该组件。

​ 默认数组的当前项 下标变量默认为index，数组当前项的变量默认为item。

​ 使用 wx:for-item 可以指定数组当前元素的变量名

​ 使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">
    下标为{{index}} ，对应的item是{{item}}
</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    下标为{{idx}} ，对应的item是{{itemName}}
</view>

 data: {
    info: 'init data',
    msgList: [{msg:'hello'},{msg:'world'}],
    msg: 1+1,
    array:[0,1,2,3]
  }

2个view页面显示一样，如下：
下标为0，对应的item是0
下标是1，对应的item是1
下标是2，对应的item是2
下标是3，对应的item是3

2.3 wx:key

实现列表渲染时， 建议为渲染出来的列表项指定唯一的key值， 从而提高渲染的效率

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

Page({
    data:{
        userList:[
			{id:1,name:'A'},
			{id:2,name:'B'},
			{id:3,name:'C'}
        ]
    }
})

3.事件绑定

类型	绑定方式	事件描述
tap	bindtap	手指触碰后 离开
input	bindinput	输入框的输入事件
change	bindchange	状态改变时触发

3.1 调用**this.setData()**方法，可以给页面data中的数据重新赋值

案例：

<button bindtap="f" type="primary">
	{{val + count +'次'}}
</button>

js: 通过调用this.setData()方法， 可以给页面data中的数据重新赋值

Page({
    data:{
       val:'点我吧',
       count:0
    },
    //定义事件
    f(e){
        console.log(e)
        this.setData(
          {
           count: this.data.count+1,
           val: '点过了'
          }
        )
      },
    }
})

3.2事件传参

可以为组件提供data-*自定义属性传参， *代表的是参数的名字。

通过event.target.dataset.参数名 即可获取到具体参数的值。

<button bindtap="send" data-arg01="{{123}}">
点击传参
</button>

js:

Page({
  send(e){
   	console.log(e.target.dataset.arg01);
  }    
}
) 

3.2 bindinput事件

value是文本框的值 bindinput表示给input绑定事件

<input bindinput="inputHander" value="{{msg}}"></input>

Page({
    data:{
        msg:""
    },
	inputHander(e){
		//文本框最新值赋值给msg
   		 this.setData({this.data.msg = e.detail.value})
  	}
)