效果图
html
<view class="top_phone">
<input placeholder="请输入手机号" type='number' bindinput='top_phone_input' bindfocus='top_phone_focus' value='{{phone}}'></input>
<button>选择号码</button>
</view>
<block wx:if='{{if_phone_list}}'>
<block wx:for="{{phone_show_list}}" wx:key=''>
<view class='item_phone_list' bindtap='item_phone_click' id='{{item}}'>{{item}}</view>
</block>
<view class='phone_list' style='position: relative;'>
<view class='phone_list_bg' bindtap='phone_list_bg_click'></view>
</view>
</block>
<view class='underline'></view>
js
Page({
data: {
if_phone_list: false,
hPhones: [13021103512, 13121103512],
phone_show_list: [13021103512, 13121103512],
},
onLoad: function(options) {},
// 手机号码输入框值变动事件
top_phone_input: function (e) {
var phone = e.detail.value;
console.log(phone)
this.setData({
if_phone_list: true,
phone: phone
})
var arr = [];
var hPhones = this.data.hPhones;
hPhones.find(function (item) {
var num = item.toString().substring(0, phone.length)
if (num == phone) {
arr.push(item)
}
})
this.setData({
phone_show_list: arr
})
if (arr.length == 0) {
this.setData({
if_phone_list: false
})
} else {
this.setData({
if_phone_list: true
})
}
this.if_util_isUnicoms(phone);
},
})
css
.top_phone {
display: flex;
flex-direction: row;
width: 100%;
}
.top_phone input {
width: 100%;
margin: 20rpx 40rpx 30rpx 40rpx;
border-bottom: 1px solid #d0d0d0;
font-size: 50rpx;
height: 80rpx;
line-height: 80rpx;
padding-bottom: 10rpx;
}
.top_phone button {
width:230rpx;
height: 60rpx;
padding: 0 auto;
font-size: 25rpx;
margin: 40rpx 20rpx 20rpx 30rpx;
line-height: 60rpx;
background: white;
border: 1rpx solid #d0d0d0;
}
.item_phone_list{
height: 100rpx;
line-height: 100rpx;
padding-left: 30rpx;
border-top: 1px solid #d0d0d0;
}
.phone_list_bg{
width: 100%;
z-index: 3;
background-color: rgba(0,0,0,0.4);
height: 1000rpx;
position: absolute;
top: 0;
}
.underline {
height: 16rpx;
border-top: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
background: #F8F8F8;
}