微信小程序调用接口后,将数据回显在picker组件(下拉列表)的做法

本文主要是介绍微信小程序调用接口后,将数据回显在picker组件(下拉列表)的做法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序实现调用后端接口后,拿到我们想要的数据后,如何显示在picker组件(select下拉列表)中的问题
以我的项目中实现效果为例
.wxml文件

      <view class="row">
        <view class="name">厂商PM：</view>
        <view class="text" data-index="{{index}}" bindtap="pmSelectPage"
          style="color: blue;text-decoration:underline dashed;" wx:if="{{item.factoryPmName!=null}}"
          data-id="{{item.id}}">
          {{item.factoryPmName}}</view>
        <view class="text" data-index="{{index}}" bindtap="pmSelectPage" style="color: blue"
          wx:if="{{item.factoryPmName==null}}" data-id="{{item.id}}">---
        </view>
      </view>
      <view class="pm-mask" wx:if="{{showModal}}"></view>
      <view class="pm-dialog" wx:if="{{selectPmFlag}}">
        <view class="pm-header pm-top">添加厂商Pm</view>
        <form bindsubmit="formFmSubmitUpdate">
          <view class="pm-content">
            <!--添加厂商Pm -->
            <view class="row">
              <view class="pm-remind" style="width:187rpx">厂商Pm：</view>
                <!-- range="{{FactoryArr}}" 数组对象我们在后端接口取得的数据,-->
              <picker mode="selector" bindchange="bindPickerFactoryPmChange" range="{{FactoryArr}}"
                range-key="{{user_name}}" value="{{factoryIndex}}">
                <input type="text" name="factoryPmName" value="{{PmName}}" class="pm-remind-input"
                  style="margin-left:-66px;" />
              </picker>
              <image src="/assets/images/blueTriangle.png" class="pm-arrow"></image>
            </view>
          </view>

          <view class="pm-footer">
            <view class="pm-cancel pm-myBut">
              <button style="float:left" size="mini" type="default" bindtap="ManagerCancel">取消</button>
            </view>
            <view class="pm-confirm pm-myBut">
              <button style="float:left" size="mini" formType="submit" type="warn">保存</button>
            </view>
          </view>
        </form>
      </view>

.js文件
Page({
data:{
},

pmSelectPage: function (e) {
//小程序固定事件取值方法
var orderId = e.currentTarget.dataset.id;
if (orderId == undefined)
orderId = 0;
this.setData({
orderId: orderId
});
let that = this;
var factoryPmIndex = e.currentTarget.dataset.index;
that.setData({
selectPmFlag: true,
showModal: true,
memoInfo: that.data.orderList[factoryPmIndex],
PmName: that.data.orderList[factoryPmIndex].factoryPmName
})
//以上代码是展示当前数据

//这个app.getUrl方法无所谓,我们根据业务需要在调到接口返回值数据就可以了
app.getUrl(config.selectFactoryPmUrl, { companyId: that.data.orderList[factoryPmIndex].factoryId, status: 1 }, function (e) {
//对从后端接口拿到的数据进行处理,
var arr = [];
for (var i = 0; i < e.length; i++) {
arr.push(e[i].user_name);
}
that.setData({
FactoryArr: arr,
fmArrs: e
})
//打印一下数据是不是我们想要的
//console.log(arr);
})
},

//这个就是我们的下拉框picker选择事件,根据我们拿到数据进行修改,把这些需要的值放到页面里去就可以了
bindPickerFactoryPmChange: function (e) {
this.setData({
factoryIndex: e.detail.value,
FmNames: this.data.fmArrs[e.detail.value].user_name,
FmIds: this.data.fmArrs[e.detail.value].user_id,
PmName: this.data.FactoryArr[e.detail.value]
})
},
})

.wxss文件
/* 页面样式根据自己的需要进行修改调整 /
/ 弹出页面样式 /
/ 模态框样式设计*/
.pm-mask {
width: 100%;
height: 100%;
background:rgba(0, 0, 0, 0.15);
position: fixed;
z-index: 1;
top: 0;
left: 0;
color:black
}

.pm-dialog {
width: 685rpx;
overflow: auto;
overflow-y: hidden;
position: fixed;
top: 50%;
left: 50%;
margin-left: -340rpx;
margin-top: -295rpx;
z-index: 9999;
background: #f9f9f9;
display: flex;
justify-content: space-between;
flex-direction: column;
color:black
}

.pm-content {
margin: 30rpx 0 30rpx 0;
padding: 0 10rpx;
color:black;
height: 30px;
font-size: 24rpx;
}

.pm-content .row {
width: 100%;
margin-top: 44rpx;
display: flex;
justify-content: center;
color:black
}

.pm-content .row input{
border: #a6cddf solid 1rpx;
border-radius: 10rpx;
}

.pm-top{
width:100%;
height:45rpx;
padding:24rpx;
border-bottom:1px solid #e1e1e1;
font-size:14px;
background-color: WhiteSmoke
}
/* 备忘录三角箭头 */
.pm-arrow{
width:12px;
height:12px;
margin-left:-20px;
margin-top:8px
}
.pm-remind{
float: left;
width: 200rpx;
margin-right:76rpx;
height:40rpx;
margin-top:5rpx
}
/*备忘录的短信提醒input */
.pm-remind-input{
width:150px;
font-size:12px;
margin-left:-22px;
}
.pm-footer {
height: 60rpx;
border-top: 1px solid #dedede;
line-height: 86rpx;
padding-top: 25rpx ;
background-color: WhiteSmoke
}

.pm-myBut {
margin-right: 20rpx;
float: right;
}
.pm-myBut button{
font-size: 24rpx !important;
padding: 5rpx 10rpx !important;
line-height: 30rpx;
}

.pm-cancel {
text-align: center;
}

.pm-cancel button {
border: 2rpx solid #CCCCCC;
border-radius: 10rpx;
}

.pm-confirm {
text-align: center;
}

.pm-confirm button {
border: 2rpx solid #e64340;
}
效果图大概是这样的

不足之处,还请多多指教,我们共同进步,交流学习

这篇关于微信小程序调用接口后,将数据回显在picker组件(下拉列表)的做法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！