uni-app使用后台返回的数据进行下拉列表的展示
最近使用uni-app框架写前端项目,碰到一个问题就是想用后台返回的部分数据来做一个下拉列表的展示,小白被这个问题卡了半天,终于解决了,记录一下趴,希望也可以帮到有着同样问题的你。 官网中的picker标签:
<template> <view class="uni-form-item uni-column"> <picker @change="selectAssetNum" :range="assetarray" :value="taskindex"> <view class="uni-input">{ { assetarray[taskindex]}}</view> </picker> </view> </template> //assetarray遍历的数组,taskindex数组的下标
数据中定义好数组和数组下标
data() { return { assetarray:[], taskindex:0, } },
onLoad:function(){ uni.showLoading({ title:"loading...." }) uni.request({ url: 你的请求路径, method: POST, data: { }, success: res => { this.news = res.data.RESPONSE.RETURN_DATA; this.task = (JSON.parse(this.news).resultData);//返回数据的处理 let assetarray = [];//定义一个新的数组来接受后台返回的部分数据 for (let index2 in this.task) { //关键的赋值 assetarray[index2] = ((this.task)[index2].assetNum); } this.assetarray = assetarray; //重要的一步,让assetarray为全局数组趴 uni.hideLoading(); }, fail: () => { }, complete: () => { } }); }, methods: { selectAssetNum:function(e){ this.taskindex = e.target.value //将数组改变索引赋给定义的index变量 } }
最终的效果如图所示,可以拿到后台返回的部分数据了: 继续开心的写代码趴!