最近做一个拼车小程序有一个需求:可以选择社区作为出发点,也可以输入出发点信息。
参考了一位大佬的帖子做了一个下拉选择框可手动输入的实例。
参考原文:https://blog.csdn.net/yelin042/article/details/79078068
下面是我的代码:
样式我是用weui的样式库
<!-- html -->
<view class="weui-cell__bd">
<picker id="start_picker" bindchange="bindPickerChange" value="{{villageOptions.id}}" range="{{villagelist}}">
<view class="weui-input">
{{villageOptions[start_villageIndex].name}}
</view>
</picker>
<view class="section {{start_reply?'on':'off'}}">
<input id="start_input" class="weui-input" bindblur="inputVillage" name="other" placeholder="请输入出发地点" type="text"/>
</view>
</view>
/* css */
.section{font-size:28rpx}
.on{display: block}
.off{display: none}
//js
Page({
data:{
villagelist:[],//显示小区范围
villageOptions: [
{id:0,name:'奥尔良社区'},
{id:1,name:'辣翅社区'},
{id:-1,name:'手动输入'}
],//小区列表
start_villageIndex: -1,//小区picker中的index
start:'',//选择出发社区
inputStart:'',//输入出发地
},
//小区列表更改
bindPickerChange(e) {
let that = this;
let index = e.detail.value;
that.pickerChange(that.data.villageOptions[index].id,index);
},
//输入选择框的选定
pickerChange(id,index) {
if (id == -1) {//手动输入
this.setData({
start_reply: true,
})
} else {//选择社区id
this.setData({
start_reply: false,
})
}
this.setData({
start_villageIndex: index,
start:id
})
},
//输入出发地点
inputVillage(e) {
this.setData({
inputStart:e.detail.value,
})
},
})
总结:欢迎评论讨论,谢谢各位大神指点迷津