小程序picker下拉渲染,以及根据id来渲染对应值

         项目需求,首先要选择下拉框的数据进行保存, 保存后点击编辑时能在picker中显示刚刚保存的值。

        *本人的项目通过封装wx.request调用接口, 所以调用接口的方法不用参考,只参考返回的数据就好

         <text class='select_title'>选择项目</text>
          <picker bindchange="bindPickerChange" name="proId" value="{{selectIndex}}" mode = "selector" range="{{select}}">
            <view class="picker">
              {{select[selectIndex]}}
            </view>
          </picker>

          page({
               select:[],          //下拉存放的数据
               selectIndex:0,   //索引,比如选择的是哪一个
               listId:[],
               proId:'',
           })         

    // 监听选择
                  bindPickerChange(e) {
                    console.log(e)
                    let _this = this;
                    let index = e.detail.value;
                    _this.setData({
                      selectIndex: index,
                      projectCode: _this.data.listId[index]
                    })
                    console.log(e.detail.value)
                    console.log('picker发送选择改变,携带值为', _this.data.select[index])
                    console.log( _this.data.projectCode)
                  },

     点击编辑后,因为都是在同一个一面做更改,所以在点击编辑时可以在url后面传一个参数来判断,如id。

   //从外面进入编辑页
        wx.navigateTo({
            url: `../addReport/addReport?id=1`
        })

   //在保存页判断是点击创建进来还是点击编辑进来
        page({
             onLoad: function (options) {
              if (options.id){
                  let data = { id: options.id }
                  editSelect(data, _this)    //如果是编辑进来就走编辑的方法
                  _this.setData({
                    editId: options.id
                  })
                }else{
                  var data = {}
                  checkProjects(data, _this)  //如果是创建进来就走创建的方法
                }
            }
        })

//点击创建进来的页面下拉框数据

          var checkProjects = function (param, pageObj) {       //该部分为本人自己封装的请求,可不看
              var _param = param;
              serverInterface.checkProjects({
                data: _param,
                success: function (res) {

                  console.log(res)                                    //从这里开始看看返回的数据  
                  var saveSelect=[];
                  var saveId=[];
                  for (var i = 0; i < res.data.entity.length;i++){
                    saveSelect.push(res.data.entity[i].projectName)     //把id 和 项目名称 分开存放
                    saveId.push(res.data.entity[i].projectId)                // //把id 和 项目名称 分开存放
                  }
                  console.log(saveId)
                  pageObj.setData({
                    select: saveSelect,
                    listId: saveId
                  })
                }
              })
            }

// 编辑方法
                var editSelect = function (param, pageObj) {
                  var _param = param;
                  serverInterface.editSelect({
                    data: _param,
                    success: function (res) {
                      console.log(res)
                      var getData=res.data.entity
                      if (getData.fileURL.length>0){
                        pageObj.setData({
                          picArr: getData.fileURL
                        })
                      }
                      pageObj.setData({
                        select: getData.projectName.split(","),      //这里就是后台返回的那个名字,因为是返回,所有不需要id
                        date: getData.date,
                        content: getData.content
                      })
                    }
                  })
                }

猜你喜欢

转载自blog.csdn.net/weixin_41760500/article/details/89244947