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

分手后的思念是犯贱 2022-10-10 09:44 142阅读 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][]

[85925e2c14f2e0512c3cf47f0898986a.png]: /images/20221005/1adc958269c94692b3151f1fffb47f4a.png