小程序vant UI 实现调用接口数据并展示

小程序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()
  }
});