标签：picker 回显 color 微信 top data height margin pm
微信小程序实现调用后端接口后,拿到我们想要的数据后,如何显示在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,回显,color,微信,top,data,height,margin,pm 来源： https://blog.csdn.net/qq_43534617/article/details/121729736
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。