swiper-item 嵌套子组件 部分机型rich-text数据渲染不全

lepo

<view class="scroll-contain" scroll-x="false" scroll-y show-scrollbar="false">
    <swiper class="scroll-swiper-contain" onchange={this.onchange} :current="this.data.swiperIndex">
        <!-- 试题列表 -->
        <swiper-item class="scroll-swiper-item" v-for="(parentQuestion,index) in parentQuestionList">
            <!-- 单选题 -->
            <single-choice-question :setFontSizeType="setFontSizeType" :parentQuestion="parentQuestion" v-if="parentQuestion.NewTestType==1 && index<this.data.swiperIndex+2"/>
            <!-- 多选题 -->
            <multiple-choice-question :setFontSizeType="setFontSizeType" :parentQuestion="parentQuestion" v-if="parentQuestion.NewTestType==2 && index<this.data.swiperIndex+2"/>
            <!-- 判断题 -->
            <jedge-question :setFontSizeType="setFontSizeType" :parentQuestion="parentQuestion" v-if="parentQuestion.NewTestType==3 && index<this.data.swiperIndex+2"/>
            <!-- 问答题 -->
            <answer-question :setFontSizeType="setFontSizeType" :parentQuestion="parentQuestion" v-if="parentQuestion.NewTestType==4 && index<this.data.swiperIndex+2"/>
            <!-- 组合题 -->
            <combination-question :setFontSizeType="setFontSizeType" :parentQuestion="parentQuestion" v-if="parentQuestion.NewTestType==5 && index<this.data.swiperIndex+2"/>
        </swiper-item>
    </swiper>
</view>


<!-- 滚动容器 -->
<scroll-view class="single-choice-question-scroll-contain" scroll-x="false" scroll-y show-scrollbar="false">

        <!-- 试题题干容器 -->
        <view class="single-choice-question-content-contain">
                <rich-text class="font-siyuan single-choice-question-content" nodes={this.fnGetQuestionContent()}></rich-text>
        </view>

        <!-- 试题解析容器 -->
        <view class="single-choice-question-analysis-contain" v-if={this.fnShowDoTime()}>       

                <!-- 标题模块 -->
                <view class="single-choice-question-module">       
                        <image class="single-choice-question-vertical-moulding" src="../../../image/question-bank/exam-result-detail/straight-line.png"></image>
                        <text class="font-siyuan single-choice-question-module-title" style={this.fnGetFontSize("fs15")}>试题解析</text>
                </view>

                <view class="single-choice-question-analysis">
                        <rich-text class="font-siyuan single-choice-question-analysis-content" nodes={this.fnGetQuestionAnalysis()}></rich-text>
                </view>
        </view>
</scroll-view>

//获取题干内容
fnGetQuestionContent(){

        //调整富文本编辑器样式
        let adjustContent = adjustEditorStyle(this.parentQuestion.Content);

        //将题库域名配置到图片路径上
        let strHtml = setDomainNameToUrl(adjustContent);

        return `<span style="${this.fnGetFontSize("fs15")}">${strHtml}</span>`;
}

//获取试题解析
fnGetQuestionAnalysis(){
       
        //调整富文本编辑器样式
        let adjustContent = adjustEditorStyle(this.parentQuestion.AnalyticQuestions);

        //调整图片域名
        let strHtml = setDomainNameToUrl(adjustContent);

        return `<span style="color:rgba(128, 128, 128, 1);${this.fnGetFontSize("fs14")}">${strHtml}</span>`;
}

/**
* 处理题库富文本样式
*/
export const adjustEditorStyle = (value) => {

    //验证非空
    if(chkFieldIsEmpty(value)){
        return "";
    }

    let strHtml = value;

    //去除头部P标签
    strHtml = strHtml.slice(0,3)=='<p>'?strHtml.slice(3,strHtml.length):strHtml;

    //去除结尾换行符
    strHtml = strHtml.slice(strHtml.length-11)=='<p><br></p>'?strHtml.slice(0,strHtml.length-11):strHtml;

    //去除结尾P标签
    strHtml = strHtml.slice(strHtml.length-4)=='</p>'?strHtml.slice(0,strHtml.length-4):strHtml;

    return strHtml;
}

chyd④④⑤⑤②⑦⑧⑤②

你这代码里面也没有rich-text标签，你用的全是组件，渲染不全是什么意思，是被遮挡了吗。

勇可可【1161277121】

截图看下

lepo

已更新

lepo

提问内容已更新

杨永安

lepo · 2024-3-21 11:43提问内容已更新

截图看一下是什么样子的渲染不全，切头去尾了，还是部分元素不显示。

如果是切头去尾了，考虑增加 flex-shrink:0 避免压缩。
如果是部门元素不显示，看看是不是有不兼容的元素和属性。