微信小程序 keyboard-accessory组件

Posted 2021-06-02 java1234_小锋

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图

Bug & Tip

1. tip: 视图最大高度为 200px

示例代码

在开发者工具中预览效果

index.wxml

<input style="margin-top: 200px;" placeholder="input" bindfocus="focus1" bindblur="blur1" hold-keyboard>
  <keyboard-accessory class="container" style="height: 100px;">
    <cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;">
      <button>click</button>
    </cover-view>
    <cover-image bindtap="tap" src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="flex: 1; width: 50px; background: red;">
    </cover-image>
  </keyboard-accessory>
</input>

<textarea hold-keyboard="{{true}}" style="margin-top: 200px;" placeholder="textarea1" bindfocus="focus2" bindblur="blur2">
  <keyboard-accessory class="container" style="height: 50px;">
    <cover-view bindtap="tap" style="flex: 1; width: 50px; background: green;">textarea1</cover-view>
    <cover-view bindtap="tap" style="flex: 1; width: 50px; background: red;">2</cover-view>
  </keyboard-accessory>
</textarea>

index.js

const app = getApp()

Page({
  data: {
    height: 50,
    flex: 1,
    show: true,
  },
  onLoad: function () {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
  },

  focus1() {
    console.log('focus input\\n')
  },

  blur1() {
    console.log('blur input')
  },

  focus2() {
    console.log('focus textarea')
  },

  blur2() {
    console.log('blur textarea')
  },
})

用真机测试效果：

input输入框获取焦点：

textarea获取焦点：

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。