微信小程序picker选择器渲染json数据

蔚落 2022-10-12 01:26 38阅读 0赞

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>

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;
    }

效果  
![85925e2c14f2e0512c3cf47f0898986a.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[85925e2c14f2e0512c3cf47f0898986a.png]: /images/20221005/548a210b0d114a69a55af293c651370d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/4accb5394b8e4b27816ec6a110f9ce56.png