前提
由于业务需求,我需要在一个弹窗中展示完整的隐私条款信息,这个隐私条款采用富文本的方式引入,而且条款内容非常非常多,我最初采用的是一个自定义组件,采用 wxParse
加载富文本,代码如下:
<wxParse nodes="{{ richText.content }}" />
示意图:
问题
- 因富文本内容过长导致加载过程缓慢,弹窗显示后需要等待一会儿才能加载完成(注意这是在已经拉取后台数据后出现的问题,也就是纯属富文本加载问题),导致用户体验感很差。
- 弹窗在拉取后台数据后出现时,内容未加载完成时点击取消按钮出现延时问题,需要等待内容加载完成才能关闭弹窗。正常情况下应该是无论内容是否加载完成,均可以关闭弹窗。
解决方法
使用小程序官方组件 <rich-text>
替换 <wxParse>
,替换后弹窗内容在拉取数据后正常显示,不会有加载问题;点击按钮可以正常关闭弹窗。
代码如下:
<rich-text
class="rich-text"
nodes="{{ memberPolicy }}"
/>