正文： wxml：
<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); }, })wxss：
.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; }