微信小程序 picker选择器从后台拿值

最新推荐文章于 2025-05-20 11:11:30 发布

进阶的码农

最新推荐文章于 2025-05-20 11:11:30 发布

阅读量1.7w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 picker选择器

本文链接：https://blog.csdn.net/wangguang1995/article/details/80907466

微信小程序专栏收录该内容

28 篇文章

订阅专栏

这种东西在项目中是很常见的，文档上有的demo我这里就不在重复一遍了，我现在说的是从后台拿到的数据，放在这个选择器里。

后台返回的格式是这样的：

我们要实现的样子是这样的：

其实跟文档上介绍的普通选择器差不多，只是多了几个条件值，

我们一起来看一下代码：主要看标红的这几个条件

<view class='regPhone f' >
            <image src='../../images/regConTeam-Icon.png' class='regCon-Icon regSelect-Icon'></image>
            <view class="row-wrap">
                <picker bindchange="bindCasPickerChange" range="{{casArray}}" value='{{casArray[casIndex].Id}}' class='regSelect' range-key="{{'Name'}}" >
                     <input class='selectInp' placeholder-class='{{place}}' placeholder='请选择团队' name='casArry' disabled='false' value='{{casArray[casIndex].Name}}'/> 
                </picker>
            </view>
            <image src='../../images/select-icon.png' class='select-icon'></image>
        </view>value='{{casArray[casIndex].Id}}' class='regSelect' range-key="{{'Name'}}" >
                     <input class='selectInp' placeholder-class='{{place}}' placeholder='请选择团队' name='casArry' disabled='false' value='{{casArray[casIndex].Name}}'/> 
                </picker>
            </view>
            <image src='../../images/select-icon.png' class='select-icon'></image>
        </view>

  /* 下拉框函数 */
  bindCasPickerChange: function (e) {
    console.log('乔丹选的是', this.data.casArray[e.detail.value].Name)
    console.log('乔丹选的是', this.data.casArray[e.detail.value].Id)
    this.setData({
      teamname: this.data.casArray[e.detail.value].Name,
      teamid: this.data.casArray[e.detail.value].Id
    })
    if (e.detail.value == 4) {
      this.setData({ reply: true })
    } else {
      this.setData({ reply: false })
    }
    this.setData({
      casIndex: e.detail.value
    })
  },

.regSelect-Icon{
  float: left;
}
.row-wrap{
  width: 80%;
  height: 100%;
  float: left;
  margin-left: 20rpx; 
  
}
.regSelect{
  font-size: 28rpx;
  position: relative;
  padding-top: 18rpx;
  height: 100%;
}
.selectInp{
  width:100%;
  font-size: 28rpx;
  position: absolute;
}
.section{
   font-size:28rpx;
   margin-left: 50rpx;
   margin-top: 30rpx;
}
.f{
  position: relative;
}
.select-icon{
  position: absolute;
  width: 30rpx;
  height: 14rpx;
  right: 40rpx;
  top: 50%;
  margin-top: -7rpx;
}
.on{display: block}
.off{display: none}
.regConBtm{
  color: #11b3c2;
  font-size: 26rpx;
  text-align: right;
  margin-top: 20rpx;
  padding-right: 20rpx;
}

想要获得更多资料的请微信搜索公众号【热血科技】，关注一下即可。