“小程序JAVA实战”小程序视图之细说天气:关键列表高级特

天气:关键的高级特性。这个很重要,因为在应用程序上经常有上拉,下拉加载,我们如果不使用这个特性的很可能列表就乱了。源码:https://github.com/limingios/wxProgram.git中号的8

小程序的列表的渲染

<李>

官方的阐述
在https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

<李>

演示wx:关键
在如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如输入中的输入内容,的选中状态),需要使用天气:关键来指定列表中项目的唯一的标识符。
天气:关键的值以两种形式提供字符串,代表在对循环的数组中项的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字*这代表在对循环中的物品本身,这种表示需要项本身是一个唯一的字符串或者数字,如:当数据改变触发渲染层重新渲染的时候,会校正带有关键的组件,框架会确保他们被重新排的序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

wxKey。wxml

 & lt; ! wxKey.wxml——比;
　　& lt;视图类=叭萜鳌北?
　　& lt;开关wx:=" {{objectArray}}”天气:关键=岸捞亍北?{{项目。id}} & lt;/switch>
　　& lt;按钮bindtap=翱亍北?开关& lt;/button>
　　& lt;按钮bindtap=癮ddToFront”比;添加到前面& lt;/button>
　　
　　& lt;开关wx:=" {{numberArray}}”天气:关键=?“比;{{项}}& lt;/switch>
　　& lt;按钮bindtap=癮ddNumberToFront”比;添加到前面& lt;/button>
　　& lt;/view> 

wxKey。js

//wxKey.js//获取应用实例
　　const应用=getApp ()
　　
　　页面({
　　数据:{
　　objectArray: [{
　　id: 5
　　独特的:“unique_5”
　　},
　　{
　　id: 4
　　独特的:“unique_4”
　　},
　　{
　　id: 3,
　　独特的:“unique_3”
　　},
　　{
　　id: 2
　　独特的:“unique_2”
　　},
　　{
　　id: 1、
　　独特的:“unique_1”
　　},
　　{
　　id: 0,
　　独特的:“unique_0”
　　},
　　),
　　numberArray:(1、2、3、4)
　　},
　　开关:函数(e) {
　　const长度=this.data.objectArray.length
　　(让我=0;我& lt;长度;+ + i) {
　　const x=Math.floor (math . random() *长度)
　　const y=Math.floor (math . random() *长度)
　　const temp=this.data.objectArray [x]
　　this.data。objectArray [x]=this.data.objectArray [y]
　　this.data。objectArray [y]=temp
　　}
　　this.setData ({
　　objectArray: this.data.objectArray
　　}）
　　},
　　addToFront:函数(e) {
　　const长度=this.data.objectArray.length
　　this.data。objectArray=[{
　　id:长度,
　　独特的:“unique_”+长度
　　}].concat (this.data.objectArray)
　　this.setData ({
　　objectArray: this.data.objectArray
　　}）
　　},
　　addNumberToFront:函数(e) {
　　this.data。(this.data.numberArray numberArray=３ざ? 1].concat (this.data.numberArray)
　　this.setData ({
　　numberArray: this.data.numberArray
　　}）
　　
　　}
　　
　　})

如果不加入wx:关键=岸捞亍被蛘遷x:关键=?“进行绑定的话,可能存在漂移的情况,这种问题很大,建议在为循环的时候都定义一个唯一的关键。

PS:列表需要的注意的很多,基本做企业开发和互联网开发列表展示很常见,也是必须的所以在wxml这块一定要对为循环做好处理,关键的绑定。小心漂移。

“小程序JAVA实战”小程序视图之细说天气:关键列表高级特