微信小程序 keyboard-accessory组件

逃离我推掉我的手 2021-09-08 01:12 627阅读 0赞

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

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

**Bug & Tip**

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

**示例代码**

[在开发者工具中预览效果][Link 1]

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输入框获取焦点：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NypPCcnw-1622384483310)(image-20210529112347549.png)\]][img-NypPCcnw-1622384483310_image-20210529112347549.png]

textarea获取焦点：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H22cVBJi-1622384483315)(image-20210529112421804.png)\]][img-H22cVBJi-1622384483315_image-20210529112421804.png]

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

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/s/GKxGjkmG77o1
[img-NypPCcnw-1622384483310_image-20210529112347549.png]: /images/20210716/ecd522e4a6294a9781619164d028bccc.png
[img-H22cVBJi-1622384483315_image-20210529112421804.png]: /images/20210716/4a9108957acb48db8211ebeb6e719b43.png