uniapp获取接口数据,渲染在picker选择器里面
时间:2022-07-22
本文章向大家介绍uniapp获取接口数据,渲染在picker选择器里面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1:打开hublider 新建一个test项目 用于写测试打代码
新建一个uniapp项目,命名为test。
可以看到,在开发工具HBuilderX里面,极速生成的模板目录结构如下
2:选择一个比较好用的ui框架 引入之后,很多代码样式都不需要自己一点点的写了,需要什么样的,直接在UI库里面复制黏贴就行 ,省了很多时间哦,不许呀考虑写出来的页面样式不好看之类的问题了。
小程序组件库ColorUI的使用,一键复制粘贴 https://www.jianshu.com/p/b816ed9e4df3
3:ui框架框架引入之后,开始写代码 打开pages底下的index.vue的组件,开始写代码了,把代码写好,这里随便写了一个例子。
接口数据 是这样的 json数据数组
{
"jobs": [{
"id": -99,
"jobName": "默认身份"
}, {
"id": 1,
"jobName": "普通员工"
}, {
"id": 2,
"jobName": "经理"
}, {
"id": 3,
"jobName": "总监"
}, {
"id": 4,
"jobName": "总经理"
}, {
"id": 5,
"jobName": "主管"
}, {
"id": 6,
"jobName": "董事长"
}, {
"id": 7,
"jobName": "总裁"
}, {
"id": 8,
"jobName": "实习生"
}, {
"id": 10,
"jobName": "炼钢工"
}, {
"id": 11,
"jobName": "电工"
}, {
"id": 12,
"jobName": "实施工"
}, {
"id": 13,
"jobName": "焊工"
}],
"retCode": 1,
"content": "操作成功"
}
接口链接我就不放出来了 反正就是这么哥数组格式的数据
4:index.vue
<template>
<view>
<form>
<view class="cu-form-group margin-top">
<view class="title">岗位</view>
<picker @change="PickerJob" :value="addressData.jobId" :range="JobList">
<view class="picker">
{{ addressData.jobId >0 ? JobList[addressData.jobId] : JobList[0]}}
</view>
</picker>
</view>
</form>
<view class="padding">
<button class="cu-btn block bg-blue margin-tb-sm lg" @click="confirm">保存员工</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
JobList: [],
JobListId: [],
modalName: null,
addressData: {
jobId: -99,
jobName: "",
}
};
},
mounted() {
this.getJob();
},
onLoad() {
},
methods: {
// 获取职位
getJob() {
uni.request({
header: {
'Content-Type': 'application/json'
},
url: "http://47.xx.xx.7x:8088/chemApp/staff/jobs.action",
method: 'POST',
data: {
"username": "john",
},
dataType: 'json',
success: (res) => {
console.log(res.data);
this.JobListId = res.data.jobs;
this.JobList = res.data.jobs.map(a => a.jobName);
console.log(this.JobList);
},
fail: function(err) {
console.log("服务器繁忙")
return;
}
});
},
PickerJob(e) {
console.log(e)
this.addressData.jobId = e.detail.value
this.addressData.jobName = this.JobListId.filter(a => a.id == e.detail.value)[0].jobName
},
confirm() {
let data = this.addressData
},
},
}
</script>
<style>
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>
5:当提交的时候,打印一下提交的数据 可以了,一件成功将要选择的数据成功提交~
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- springmvc之自定义视图
- 【colab pytorch】训练和测试常用模板代码
- django-VIews之HttpResponse(一)
- django-Views之request(二)
- django-Views之常见的几种错误视图代码(三)
- django-Views之装饰器(四)
- django-Views之使用视图渲染模板(五)
- springmvc实例之显示雇员相关信息(一)
- django-Views之类视图 (六)
- springmvc之重定向
- django-模板之自定义模板路径(一)
- spring配置Bean之基于xml文件的方式
- django-模板之模板变量(二)
- 【猫狗数据集】计算数据集的平均值和方差
- django-模板之extends(三)