微信小程序vant 输入框问题

在开发时候需要添加评论，点击的时候从底部弹起，效果如下图

开发过程中遇到的问题有如下几个：
1.van-field 搭配 van-popup
个别手机弹出后会导致输入框位置乱跳，问题原因是van-popup多次弹出数据渲染会有一定问题
2.van-field 搭配 van-overlay（遮罩）
遮罩弹出太慢，手机性能比较差的体验太差
3.IOS自动推上去内容跑掉

处理方案：
自义定遮罩，利用display进行设置，手机性能差的也几乎不会卡顿
参考的是网上一个小哥代码：https://www.cnblogs.com/fps2tao/p/11290221.html

// 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-fieldvalue="{{ 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-limitauto-focusfocusplaceholder-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-fieldvalue="{{ 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-limitauto-focusfocusplaceholder-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.detailthis.triggerEvent("onInput", e.detail)},onClose () {this.setData({show: false})this.triggerEvent("close")}}
})

微信小程序vant 输入框问题相关推荐

微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序自定义输入框个数
一.使用到的知识点 1.微信小程序Number()和parseInt() 2.colorui的var组件 3.wx.setStorageSync保存至本地缓存二.关键源码 <view clas ...
华为手机微信小程序 input输入框上移
不知道大家有木有遇到过微信小程序的input 调起输入法的时候会被挤上去输入框跑到上面去了无论css怎么写怎么布局还是会跑上移尤其是测试mm的华为手机别的手机都OK的解决的方法是给i ...
微信小程序 vant webapp开发
一.简介 vant 官网 https://youzan.github.io/vant-weapp/#/home 最近开发微信小程序使用 vant 过程中按照官网步骤没有成功,特此记录二.环境说明开 ...
微信小程序 + vant组件van-card 图片解析不到
在使用vant组件制作微信小程序项目时,遇到了图片解析不到的问题. 场景如下: 在页面中,应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性,即可在左侧位 ...
微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
场景: 微信小程序真机中 textarea输入框内有很多文字,从中间删除文字,速度快的时候,光标会从中间跳到最后位置! 原因: input.textarea事件中,给input框绑定任何事件后,在处理 ...
微信小程序实现输入框防抖
防抖在小程序上使用之前得先介绍一下防抖.无非就是将一个频繁的操作延迟触发并且同时减少触发次数. 本质就是利用闭包保存定时器数据,并且在延迟时间内频繁触发会清除上一次的定时器操作.最后能触发的只能是触 ...
微信小程序实现输入框与文本框数值联动效果
本篇文章主要讲解微信小程序下,input输入框输入后,页面中的文本信息进行即时更新联动的效果实现方法日期:2022年10月4日作者:任聪聪一.效果演示二.实现思路给input框进行绑定函数, ...
微信小程序——Vant Weapp的初步使用说明
在微信工程目录下在终端中输入npm init(初始化设置) 不用输入继续回车(全部默认即可) 整个步骤结束以后它会在\miniprogram目录下生成两个json文件不用去修改它自动生成的文件,接 ...

微信小程序vant 输入框问题

微信小程序vant 输入框问题相关推荐

最新文章

热门文章