【笔记】解决textarea层级过高造成的穿透和滞留问题
发布于 4 年前 作者 mengxia 3895 次浏览 来自 分享

问题:

最近开发项目的时候,因为将textarea放到了弹层里,结果出现了弹层隐藏过程中textarea滞留的问题,滑动页面时,仍然穿透到最顶层,体验非常差。

解决方案:

在弹层收起动画开始的时候,将textarea隐藏掉,弹出弹层的时候再显示出来。

代码如下:
<form bindsubmit='postSave' report-submit>
   <view class="postText">
  <!--使用showTextarea控制textarea的显示和隐藏-->
     <textarea wx:if="{{showTextarea}}" class="textarea" name="posttext" placeholder="写下今日小确幸,最多输入60个字" maxlength="60" bindinput="bindinput" hold-keyboard></textarea>
   </view>
   <view class="postPublic">
     <text>发布到广场</text>
     <switch class="switch-input" color="#7dbfb5" name="postpublic" checked="{{postData.public}}" bindchange="switchChange"></switch>
   </view>
   <button wx:if="{{userAuth}}" disabled="{{typing}}" hover-class="none" form-type="submit">发布</button>
</form>

data: {
    showTextarea: false //解决Textarea层级过高问题,导致关闭动画时滞留
 },
close() {
  this.setData({
     showTextarea: false
  })
// 弹窗动画略
},
open() {
  this.setData({
   showTextarea: true
  })
  // 弹窗动画略
}
回到顶部