效果图:
说明:
请选择房屋所在城市
的效果是省市区选择器,刚开始我们可能直接在picker
选择器中直接包含一个input
输入框实现,但是这样的话点击选择的话可能聚焦在输入框中,我们想要的效果是点击的时候直接拉起省市区选择器。
解决办法:考虑到未选择前有文字提示,我们可以用判断city变量的方法条件显示提示和选择的内容,同时为了在表单提交中可以获取到内容,可以把选择的内容同时绑定到input输入框并且把input框隐藏。
<form catchsubmit="submitFn">
<picker mode="region" bindchange="bindRegionChange" value="{
{region}}">
<view class="item">
<text class="text">*</text>
<view class="weui-input" wx:if="{
{city.length > 0}}">
{
{city}}
</view>
<view class="input-placeholder" wx:else>
请选择房屋所在城市
</view>
<input type="text" name="city" value="{
{city}}" hidden="true"/>
</view>
</picker>
<view class="item">
<text class="text"></text>