json数据
{ "msg": "查询成功", "code": 1, "data": [{ "id": 1413, "organName": "广西化工有限公司" }, { "id": 1414, "organName": "安全环保部" }, { "id": 1415, "organName": "综合管理部" }, { "id": 1416, "organName": "财务部" }, { "id": 1417, "organName": "制造部" }, { "id": 1418, "organName": "设备专业" }, { "id": 1419, "organName": "仪表专业" }, { "id": 1420, "organName": "电气专业" }, { "id": 1421, "organName": "工艺专业" }, { "id": 1422, "organName": "调度管理" }, { "id": 1423, "organName": "气化装置" }, { "id": 1424, "organName": "甲醇装置" }, { "id": 1425, "organName": "醋酸装置" }, { "id": 1426, "organName": "乙二醇装置" }, { "id": 1427, "organName": "测试机构" }] }
wxml
<form catchsubmit="confirmPublish"> <view class="cu-form-group margin-top"> <view class="title d-flex">被访部门 </view> <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerOrgan" value="{{index2}}" range="{{organarray}}"> <view class="picker" > {{organarray[visitOrganId]}} </view> </picker> </view> </form>
js
Page({ data: { organarray: [], visitOrganId: 0, }, //部门 bindPickerOrgan: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ visitOrganId: e.detail.value }) }, onLoad: function (options) { this.getOrgans() }, //获取部门节点 getOrgans: function () { var that = this; wx.request({ url: 'http://192.1xxx8.4.xxx3:8093/cs-applet/subscribe/getOrgans', header: { 'content-type': 'application/json', }, method: 'get', success: res => { that.setData({ organarray: (res.data.data || []).map(a => { return a.organName }) }) }, }) }, })
css
/* 确认发布的按钮 */ .btn1 { width: 90%; margin-top: 70rpx; margin-bottom: 70rpx; background-color: #09BB07; color: white; font-size: 33rpx; border-radius:13rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; } .d-flex { display: flex; } .cu-form-group .title { text-align: justify; padding-right: 30rpx; font-size: 30rpx; position: relative; height: 60rpx; line-height: 60rpx; } .cu-form-group { background-color: var(--white); padding: 1rpx 30rpx; display: flex; align-items: center; min-height: 100rpx; justify-content: space-between; } .borderBottom { border-bottom: 1rpx solid #eee; } .ai-center { align-items: center; } .jc-start { justify-content: flex-start; } .flex-1 { flex: 1; } .cu-form-group input { flex: 1; font-size: 30rpx; color: #555; padding-right: 20rpx; }
效果