在小程序 webview 加载后会覆盖其他组件的问题

在小程序 webview 加载后会覆盖其他组件的问题

最近，我决定给自己的小程序扩展一个资源板块，目的是让用户能够更方便地查看与我文章相关的外部资源。这个板块的设计大致是这样的：底部有一个 webview 组件，用于加载我所分享的其他相关文章的链接；而底部则有一个可以弹出的功能栏，用于展示对应资源的链接信息，用户可以通过拖动功能栏来查看更多内容。

设计的效果图如下所示：

看起来很简单对吧？但在实现过程中，我遇到了一些问题。当我将代码部署到小程序中时，功能栏没有按预期显示出来。原本应该在底部可拖动的功能栏消失了，造成了显示异常。

经过查询官方文档后，我得知了一个关键点：web-view 组件会自动铺满整个页面，并且会覆盖其他组件。因此，在小程序的渲染过程中，底部的功能栏被 webview 组件覆盖住了，导致功能栏无法正常显示。

为了解决这个问题，我开始查解决方案，最终发现了一个方法：使用 cover-view 组件来覆盖 web-view 组件，并通过设置 z-index 来确保功能栏显示在 webview 之上。具体实现如下所示：

<web-view 
        v-if="resource.article_link && !isH5"
        :src="resource.article_link" 
        class="article-webview"
      >
    <cover-view
        v-if="showPanel"
        class="bottom-panel"
        :class="{ 'expanded': isPanelExpanded }"
        :style="{ height: currentHeight + 'px' }"
        @touchstart="dragStart"
        @touchmove="dragMove"
        @touchend="dragEnd"
        @mousedown="dragStart"
        @mousemove="dragMove"
        @mouseup="dragEnd"
        @mouseleave="dragEnd"
      >
        <!-- 顶部拖动条 -->
        <cover-view class="drag-handle" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd" @click="expandPanel">
          <cover-view class="drag-bar drag-handle"></cover-view>
        </cover-view>
    </cover-view>
</web-view>

通过这段代码，cover-view 组件覆盖在 web-view 组件之上，并且可以实现拖动、展开等功能。这样，底部的功能栏能够正常显示，同时也能够通过触摸事件来拖动面板，提供了良好的用户交互体验。

尽管这个方法解决了问题，但在实际应用中还是遇到了一些小问题，比如展开功能栏后的动效没有预期那么流畅，或者展开后的功能栏显示不完全。为了进一步优化，我打算重新定义导航栏，并在导航栏中加入更多的控制按钮来处理这些细节问题。

此外，我还考虑过另一种方法：将文章转换为富文本格式，并使用小程序的 rich-text 组件进行展示。这种方法可以避免 web-view 组件的一些限制，直接在小程序中展示内容。但是，由于转换过程比较麻烦，而且我的懒惰使得我最终没有选择这条路线，所以目前暂时搁置了这个思路。

总的来说，虽然小程序开发中遇到了一些挑战，但通过灵活的调整和不同组件的组合，我成功实现了一个资源板块。这个板块不仅能够展示外部文章链接，还提供了更好的交互体验，增强了小程序的功能性。对于以后有类似需求的小伙伴来说，掌握这些技巧也许能帮助你们更高效地解决类似问题。

至于后续的优化，我还是打算多做一些测试，看看能否解决功能栏展开效果的问题，毕竟用户体验是最重要的。