由于项目需要,我需要在微信小程序键盘弹起时添加两个按钮
一开始,我使用的是微信小程序的
组件,因为他属于微信小程序自带的
<textarea hold-keyboard="{{true}}">
<keyboard-accessory class="container" style="height: 50px;">
<cover-view bindtap="tap" style="flex: 1; background: green;">1</cover-view>
<cover-view bindtap="tap" style="flex: 1; background: red;">2</cover-view>
</keyboard-accessory></textarea>但是我发现腾讯自带的按钮在安卓端和ios端的表现并不一致
这样,我们只能通过cover-view组件在小程序键盘弹起的时候根据键盘高度得到键盘位置的定位
<cover-view
class="btn_wrap"
:style="boxbottom"
v-if="focus && platform !== 'windows'"
>
<button class="btn" @tap.stop="showAsr">语音输入</button>
<button @tap.stop="fullscreen" class="btn">全屏输入切换</button>
</cover-view>
<view
:class="[
'uni-input',
fullscreenStatu ? 'fullscreen' : '',
hidden ? 'hidden' : '',
]"
:always-embed="true"
:style="
cssstyle
(fullscreenStatu
? ';height:' inputheight ';top:' currentTop 'px'
: '')
"
>
<textarea
:placeholder="placeholder"
:maxlength="maxlength"
:value="currentvalue"
:fixed="true"
:disabled="disabled || hidden"
:class="['textarea-input', hidden ? 'hidden' : '']"
:adjust-position="false"
:hold-keyboard="true"
:focus="inputfocus"
:id="'t' uid"
:data-maxnum="(currentvalue.length || 0) '/' maxlength"
@input="showAsr"
@focus="onfocus"
@blur="onblur"
@keyboardheightchange="keyboardheightchange"
/>
</view>
通过在获取焦点,失去焦点,输入时的控制,让按钮处于键盘的上方
但还有一个问题是由于textarea在小程序中的层级问题,所以页面上有多高textarea时,只能把当前编辑的textarea进行显示,其他textarea需要替换成view
还有一个未解决的问题是页面滚动时,位于textarea里面的文字不会随scroll-view的滚动条滚动
这个问题目前只能靠微信小程序后面修复了
相关文章
最新资讯