收藏
回答

fixed定位容器中的textarea问题,fixed:true无法解决

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug textarea 客户端 6.7.3 2.0.0

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo

<view class="page-body" style='position: fixed;overflow-y: scroll;width: 100%;height: 100%;'>

<view class="page-section">

<view class="page-section-title">输入区域高度自适应,不会出现滚动条</view>

<view class="textarea-wrp">

<textarea  fixed='true' value='输入区域高度自适应,不会出现滚动条' bindblur="bindTextAreaBlur" auto-height />

</view>

</view>


<view class="page-section">

<view class="page-section-title">这是一个可以自动聚焦的textarea</view>

<view class="textarea-wrp">

<textarea auto-focus="true" style="height: 3em" />

</view>

</view>


<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>

<view>1111</view>



</view>



直接创建一个空白的小程序页面,然后在wxml文件中粘贴这段代码,手机预览就可看到效果

<view class="page-body" style='position: fixed;overflow-y: scroll;width: 100%;height: 100%;'> <view class="page-section"> <view class="page-section-title">输入区域高度自适应,不会出现滚动条</view> <view class="textarea-wrp"> <textarea fixed='true' value='输入区域高度自适应,不会出现滚动条' bindblur="bindTextAreaBlur" auto-height /> </view> </view> <view class="page-section"> <view class="page-section-title">这是一个可以自动聚焦的textarea</view> <view class="textarea-wrp"> <textarea auto-focus="true" style="height: 3em" /> </view> </view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> <view>1111</view> </view>
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-10-11

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-10-11
    赞同
    回复 2
    • 十
      2018-10-12

      这是代码片段的分享链接:


      wechatide://minicode/90mnx6mD7H3f

      2018-10-12
      回复
    • 十
      2018-10-12回复

      在荣耀v10和iphone 6上都是那个效果

      2018-10-12
      回复
  • 十
    2018-10-12

    微信开发者工具里没有问题,在真机测试里会出现textarea文字内容固定在页面中的它的初始位置不动,滚动时textarea容器已经走了,内容还在原地。这是一个最简单的复现demo。

    2018-10-12
    赞同
    回复
登录 后发表内容