uni-app开发心得(四)

2023-09-06 16:33:22

次阅读

小程序上的键盘上方按钮

由于项目需要,我需要在微信小程序键盘弹起时添加两个按钮

一开始,我使用的是微信小程序的

keyboard-accessory

组件,因为他属于微信小程序自带的

<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的滚动条滚动

这个问题目前只能靠微信小程序后面修复了

相关文章

最新资讯