小程序vant UI 实现调用接口数据并展示
官网地址:https://vant-contrib.gitee.io/vant-weapp/#/picker
思路: 官方网站上用columns(字符串数组),然而后端传送过来的是json格式的数组,我们可以用一次遍历剥离出json数组中的数据,重新组装成一个新的数组并进行赋值。
json 数据样式如下:
{id: "1", value: "物理学"}, {id: "2", value: "应用物理学"}, {id: "3", value: " ↵核物理"},…]
0: {id: "1", value: "物理学"}
1: {id: "2", value: "应用物理学"}
2: {id: "3", value: " ↵核物理"}
3: {id: "4", value: "系统科学与工程"}
4: {id: "5", value: "量子信息科学"}
wxml:
<van-picker columns="{{ columns }}" bind:change="onChange" />
js
Page({
data: {
columns: [],
ids: []
},
onChange(event) {
const { picker, value, index } = event.detail;
},
//showDate
showData(){
let that = this
wx.request({
url: 'http://127.0.0.1/instrument/common/getMajors.php',
data:{},
success(res){
if (res.data.code == 200) {
let arr = res.data.data
let values = []
let ids = []
for(let i = 0; i < arr.length; i++) {
values = values.concat(arr[i].value)
ids = ids.concat(arr[i].id)
}
that.setData({
columns: values,
ids: ids
})
}
}
})
},
onLoad(options){
this.showData()
}
});