微信小程序vant 输入框问题处理方案
作者：浊清。。。
这篇文章主要介绍了微信小程序vant输入框问题,本文给大家分享完美解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
在开发时候需要添加评论，点击的时候从底部弹起，效果如下图
开发过程中遇到的问题有如下几个：
1.van-field 搭配 van-popup
个别手机弹出后会导致输入框位置乱跳，问题原因是van-popup多次弹出数据渲染会有一定问题
2.van-field 搭配 van-overlay（遮罩）
遮罩弹出太慢，手机性能比较差的体验太差
3.IOS自动推上去内容跑掉
处理方案：
自义定遮罩，利用display进行设置，手机性能差的也几乎不会卡顿
参考的是网上一个小哥代码：https://www.jb51.net/javascript/2976631fc.htm
// wxml代码
// catchtouchmove="true" 对遮罩的穿透处理
<view class="overlayInput" style='display:{{showInput ? "block" : "none"}}' catchtouchmove="true" bindtap="onCancel"></view>// wxss代码
// 这边代码是之前百度网上一个哥们的代码，
.overlayInput {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 2;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}van-field代码如下，因为每次点击评论按钮需要自动吊起键盘，所以加一个wx:if,这样每次autofoucus都会生效，我这边是写成一个组件，父级调用的时候传值下来showInput
<view class="comInput" style="bottom: {{isBlur ? blurBottom : bottom}}px" wx:if="{{showInput}}">
<view class="top hairline">
<view class="cancel" bindtap="onCancel">取消</view>
<view class="title">发表观点</view>
<view class="release" bindtap="onRelease">发布</view>
</view>
<view class="comtent">{{title}}</view>
<view style="padding:0 10px 10px 10px;">
<van-field
value="{{ inputValue }}"
placeholder="内容经过官方合规性审查通过后对所有人可见"
border="{{ false }}"
cursor-spacing="95"
input-class="border"
bind:change="onChange"
autosize="{{autoSize}}"
bind:keyboardheightchange="keyboardheightchange"
maxlength="200"
adjust-position="{{false}}"
arrow-direction="left"
fixed="{{true}}"
type="textarea"
bind:focus="onFoucs"
bind:blur="onBlur"
bind:linechange="onLineChange"
show-word-limit
auto-focus
focus
placeholder-class="place"
input-class="com-input-class"
show-confirm-bar="{{ false }}"
/>
</view>
</view>优化处理：
由于小程序本身性能问题，每次键盘唤醒都可以看到很明显的卡顿，这边参考了微博小程序的做法，第一次弹起的时候记录一下位置，下次弹起直接跳转到对应位置
组件全部代码如下，有需要可以自行提取使用，需要自己修改部分:
// 样式
.overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 2;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}
.comInput {
/* height: 200px; */
position: fixed;
width: 100%;
background: #fff;
z-index: 20;
/* bottom: 0; */
border-radius: 26rpx 26rpx 0 0;
}
.top {
padding: 10px 16px;
text-align: center;
}
.cancel {
float: left;
width: 50px;
text-align: left;
}
.title {
display: inline-block;
}
.release {
float: right;
width: 100rpx;
height: 50rpx;
background:rgba(255,194,64,1);
border-radius: 25rpx;
font-size: 30rpx;
}
.hairline {
border-bottom: 1px solid #efefef;
}
.comtent {
padding: 10px 16px;
}
.com-input-class {
background: #efefef;
border-radius: 3px;
padding: 5px 5px 5px 5px;
}
.place {
color:red;
}// wxml代码
<view class="overlay" style='display:{{showInput ? "block" : "none"}}' catchtouchmove="true" bindtap="onCancel"></view>
<view class="comInput" style="bottom: {{isBlur ? blurBottom : bottom}}px" wx:if="{{showInput}}">
<view class="top hairline">
<view class="cancel" bindtap="onCancel">取消</view>
<view class="title">发表观点</view>
<view class="release" bindtap="onRelease">发布</view>
</view>
<view class="comtent">{{title}}</view>
<view style="padding:0 10px 10px 10px;">
<van-field
value="{{ inputValue }}"
placeholder="内容经过官方合规性审查通过后对所有人可见"
border="{{ false }}"
cursor-spacing="95"
input-class="border"
bind:change="onChange"
autosize="{{autoSize}}"
bind:keyboardheightchange="keyboardheightchange"
maxlength="200"
adjust-position="{{false}}"
arrow-direction="left"
fixed="{{true}}"
type="textarea"
bind:focus="onFoucs"
bind:blur="onBlur"
bind:linechange="onLineChange"
show-word-limit
auto-focus
focus
placeholder-class="place"
input-class="com-input-class"
show-confirm-bar="{{ false }}"
/>
</view>
</view>// js代码
Component({
/**
* 组件的属性列表
*/
properties: {
inputValue: String,
title: String,
showInput: {
value: false,
type: Boolean
}
},
/**
* 组件的初始数据
*/
data: {
autoSize: {
maxHeight: 100,
minHeight: 100
},
show: false,
value: "",
bottom: 0,
isBlur: true,
blurBottom: 0
},
/**
* 组件的方法列表
*/
methods: {
keyboardheightchange (e) {
// this.setData({
// bottom: e.detail.height
// })
},
onFoucs (e) {
this.setData({
bottom: e.detail.height,
isBlur: false
})
},
onLineChange (e) {
},
onBlur (e) {
this.setData({
isBlur: true
})
},
onShowInput () {
this.setData({
show: true
})
},
onCancel () {
console.log("点击了取消")
this.setData({
show: false
})
this.triggerEvent("close")
},
onRelease () {
if (!this.data.inputValue.trim())
return wx.showToast({
title: "请填写评论内容",
icon: 'none',
duration: 2000
})
this.triggerEvent("onOneComment", this.data.inputValue)
this.onClose()
},
onChange (e) {
this.data.inputValue = e.detail
this.triggerEvent("onInput", e.detail)
},
onClose () {
this.setData({
show: false
})
this.triggerEvent("close")
}
}
})到此这篇关于微信小程序vant 输入框问题的文章就介绍到这了,更多相关微信小程序vant 输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！