微信小程序读取本地数据，列表循环

一：小程序读取本地数据

 
一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露的接口，然后读取本地数据。如果涉及到一些针对这些数据的处理方法，也可以把方法写好，封装到.js文件里面，然后需要时调用。

module.exports = {  
    mtData: mtData,  
    searchmtdata: searchmtdata,  
    usedraw: usedraw  
}  
var mt_data = mtData()  
function searchmtdata(id) {  
    var result  
    for (let i = 0; i < mt_data.list.length; i++) {  
        var mt = mt_data.list[i]  
        if (mt.id == id) {  
            result = mt  
        }  
    }  
    return result || {}  
}  
function mtData() {  
    var arr = {  
        list: [  
            {  
                id: '1',  
                MTId: 'MT001',  
                status: 'working',  
                Duration: 3,  
                Operator: 'tom',  
                IdleReason: 'lunch'  
            }, {  
                id: '2',  
                MTId: 'MT002',  
                status: 'Idle',  
                Duration: 7,  
                Operator: 'jerry',  
                IdleReason: 'reparied'  
            }, {  
                id: '3',  
                MTId: 'MT003',  
                status: 'Idle',  
                Duration: 6,  
                Operator: 'tom',  
                IdleReason: 'lunch'  
            }, {  
                id: '4',  
                MTId: 'MT004',  
                status: 'working',  
                Duration: 9,  
                Operator: 'jerry',  
                IdleReason: 'reparied'  
            }, {  
                id: '5',  
                MTId: 'MT005',  
                status: 'Idle',  
                Duration: 2,  
                Operator: 'tom',  
                IdleReason: 'lunch'  
            }, {  
                id: '6',  
                MTId: 'MT006',  
                status: 'working',  
                Duration: 6,  
                Operator: 'jerry',  
                IdleReason: 'reparied'  
            }, {  
                id: '7',  
                MTId: 'MT007',  
                status: 'Idle',  
                Duration: 1,  
                Operator: 'tom',  
                IdleReason: 'lunch'  
            }  
        ]  
    }  
    return arr  
}  

如上面的代码片段所示，function mtData写好的本地数据，其中包含对象List。另外还有一个function searchmtdata，这个方法是根据传参的不同加载具体的数据，接下来会用到，方法和数据都写好后，需要写一个对外暴露的接口：

module.exports = {  
    mtData: mtData,  
    searchmtdata: searchmtdata,  
    usedraw: usedraw  
}  

在其他页面调用data文件（一般是在js文件里面）

var fileData = require('../../utils/data.js')  
Page({  
  data: {  
    showData: fileData.mtData().list,  
  },  
})  

像上面的示例一样，在data{}中赋值后，showData就可以直接在wxml中显示了。

二：列表循环

 
让我们先看看代码

.wxml 代码

<block wx:for="{{items}}">
  <label><checkbox />{{item.title}}</label>
</block>
<button bindtap="chng">变更项</button>

.js 代码

data: {
    items: [
{
  id: 1,
  title: "a"
},
{
  id: 2,
  title: "b",
},
{
  id: 3,
  title: "c",
}
]
},
  chng: function(e){
    this.setData({
      items: [
{
  id: 2,
  title: "b"
},
{
  id: 1,
  title: "a",
},
{
  id: 3,
  title: "c",
}
]
  })
}

效果如下：

点击按钮“变更项”前，我们选中第二项，即 b 那一项。效果如下： 

572668754da4cc70d2ff5983a3616142.png (1.43 KB, 下载次数: 39)

下载附件

2018-5-7 05:15 上传

点击按钮“变更项”后，我们改变了 items 项的顺序。效果如下： 

bf978684e7e9bf28bfaa71d1df9c33d4.png (1.44 KB, 下载次数: 38)

下载附件

2018-5-7 05:15 上传

虽然字母顺序变了，但是选择项没有变。

如果我们希望用户输入也跟随，则使用wx:key

wx:key 指定 items 中一个具有唯一值的属性，比如我们这里的 id，

将 <block wx:for="{{items}}"> 改为 <block wx:for="{{items}}"wx:key="id">，注意：是 wx:key="id"，不是 wx:key="{{id}}"。

此时，点击按钮“变更项”后，我们改变了 items 项的顺序。效果如下：

e0941b4f92c1d6c01810974f5da35682.png (1.45 KB, 下载次数: 32)

下载附件

2018-5-7 05:15 上传

以上只是改变顺序，如果是改变 items 元素个数，道理一样的。

再细化一下，如果我们对 checkbox 使用了 checked="{{checked}}"，而 setData 赋新值时为数组元素设置了：{ id:2, checked:false, title:"b" }, 而在点按钮之前又选中了 b，点按钮后，是继续选中 b，还是听新值的呢？听新值的。

那新值不要 checked 属性，是不是就继续选中 b 呢？也不是，因为没有赋值，对 {{checked}} 来说，相当于 false（boolean 默认值是 false）。