【笔记】解决textarea层级过高造成的穿透和滞留问题
问题:
最近开发项目的时候,因为将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
})
// 弹窗动画略
}