uni-app 自定义组件循环slot在百度小程序异常

uni-app 自定义组件循环slot在百度小程序异常

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:4.45

手机系统:Android

手机系统版本号:Android 15

手机厂商:华为

页面类型:vue

vue版本:vue3

打包方式:云端

项目创建方式:HBuilderX

示例代码:

<template>  
    <view class="container container335134">  
        <u-form-item labelWidth="auto" class="diygw-col-24" label="复选按钮" labelPosition="top" prop="ucheckbox">  
            <diy-checkbox class="diygw-col-24" mode="checkbox" v-model="ucheckbox" :list="ucheckboxDatas" @change="changeUcheckbox"> </diy-checkbox>  
        </u-form-item>  
        <u-form-item labelWidth="auto" class="diygw-col-24" label="反馈类型" labelPosition="top" prop="ucheckbox1">  
            <diy-checkbox class="diygw-col-24" radius="8px" col="6" mode="radio" v-model="ucheckbox1" :list="questionTypes1" @change="changeUcheckbox1">  
                <template  v-slot:item="{ item, index }" >  
                <view class="flex text-left flex-content diygw-col-24">  
                    <view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex1-clz">  
                        <text class="flex icon1 diygw-col-0" :class="[item.icon]"></text>  
                        <text class="diygw-col-0 text-clz">  
                            {{ item.title }}  
                        </text>  
                    </view>  
                </view>   
                </template>  
            </diy-checkbox>  
        </u-form-item>  
        <view class="clearfix"></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                //用户全局信息  
                userInfo: {},  
                //页面传参  
                globalOption: {},  
                //自定义全局变量  
                globalData: { isshow: false },  
                swipersNum: 1,  
                swipers: {  
                    rows: [  
                        {  
                            id: 0,  
                            title: '',  
                            remark: '',  
                            img: '',  
                            path: null,  
                            userId: 0,  
                            createTime: '',  
                            updateTime: '',  
                            deleteTime: null  
                        }  
                    ],  
                    total: 0,  
                    code: 0,  
                    msg: ''  
                },  
                noticesNum: 1,  
                notices: {  
                    rows: [  
                        {  
                            id: 0,  
                            title: '',  
                            remark: '',  
                            userId: 0,  
                            createTime: '',  
                            updateTime: '',  
                            deleteTime: null  
                        }  
                    ],  
                    total: 0,  
                    code: 0,  
                    msg: ''  
                },  
                huodongsNum: 1,  
                huodongs: {  
                    rows: [  
                        {  
                            id: 0,  
                            title: '',  
                            remark: '',  
                            starttime: null,  
                            endtime: '',  
                            address: null,  
                            num: 0,  
                            views: 0,  
                            baomingnum: 0,  
                            imgs: null,  
                            img: '',  
                            content: '',  
                            fields: '',  
                            userId: 0,  
                            createTime: '',  
                            updateTime: '',  
                            deleteTime: null,  
                            baomingEndtime: null  
                        }  
                    ],  
                    total: 0,  
                    code: 0,  
                    msg: ''  
                },  
                ucheckboxDatas: [  
                    { value: '1', label: '选项一', disabled: false },  
                    { value: '2', label: '选项二', disabled: false },  
                    { value: '3', label: '选项三', disabled: false }  
                ],  
                ucheckbox: ['1'],  
                questionTypes1: [  
                    { value: '1', icon: 'diy-icon-safe', title: '上传' },  
                    { value: '2', icon: 'diy-icon-pic', title: '识别'},  
                    { value: '3', icon: 'diy-icon-mail', title: '其他' },  
                    { value: '4', icon: 'diy-icon-home', title: '首页' }  
                ],  
                ucheckbox1: '1'  
            };  
        },  
        onShow() {  
            this.setCurrentPage(this);  
        },  
        onLoad(option) {  
            this.setCurrentPage(this);  
            if (option) {  
                this.setData({  
                    globalOption: this.getOption(option)  
                });  
            }  

            this.init();  
        },  
        methods: {  
            async init() {  
                this.swipersApi();  
                this.noticesApi();  
                await this.huodongsApi();  
            },  
            // 轮播数据 API请求方法  
            async swipersApi(param) {  
                let thiz = this;  
                param = param || {};  

                //请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑  
                let http_url = '/cms/api.swiper/list';  
                let http_data = {  
                    pageNum: this.swipersNum,  
                    pageSize: 10,  
                    pageSize: param.pageSize || '5'  
                };  
                let http_header = {};  

                let swipers = await this.$http.post(http_url, http_data, http_header, 'json');  

                this.swipers = swipers;  
                this.globalData.isshow = true;  
            },  
            // 公告数据 API请求方法  
            async noticesApi(param) {  
                let thiz = this;  
                param = param || {};  

                //请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑  
                let http_url = '/cms/api.notice/list';  
                let http_data = {  
                    pageNum: this.noticesNum,  
                    pageSize: 10,  
                    pageSize: param.pageSize || '5'  
                };  
                let http_header = {};  

                let notices = await this.$http.post(http_url, http_data, http_header, 'json');  

                this.notices = notices;  
            },  
            // 活动数据 API请求方法  
            async huodongsApi(param) {  
                let thiz = this;  
                param = param || {};  

                //如果请求要重置页面,请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象  
                if (param.refresh || typeof param != 'object') {  
                    this.huodongsNum = 1;  
                }  

                //请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑  
                let http_url = '/cms/api.huodong/list';  
                let http_data = {  
                    pageNum: this.huodongsNum,  
                    pageSize: 10  
                };  
                let http_header = {};  

                http_data.baomingEndtime_gt = this.$tools.formatDateTime(new Date());  

                let huodongs = await this.$http.post(http_url, http_data, http_header, 'json');  

                let datarows = huodongs.rows;  
                if (http_data.pageNum == 1) {  
                    this.huodongs = huodongs;  
                } else if (datarows) {  
                    let rows = this.huodongs.rows.concat(datarows);  
                    huodongs.rows = rows;  
                    this.huodongs = Object.assign(this.huodongs, huodongs);  
                }  
                if (datarows && datarows.length > 0) {  
                    this.huodongsNum = this.huodongsNum + 1;  
                }  
                this.globalData.isshow = true;  
            },  

            // 打开链接 自定义方法  
            async openFunction(param) {  
                let thiz = this;  
                let path = param && (param.path || param.path == 0) ? param.path : thiz.item.path || '';  
                if (path) {  
                    this.navigateTo({  
                        type: 'page',  
                        url: path  
                    });  
                }  
            },  
            changeUcheckbox(evt) {},  
            changeUcheckbox1(evt) {}  
        },  
        onPullDownRefresh() {  
            // 活动数据 API请求方法  
            this.huodongsNum = 1;  
            this.huodongsApi();  

            uni.stopPullDownRefresh();  
        },  
        onReachBottom() {  
            // 活动数据 API请求方法  
            this.huodongsApi();  
        }  
    };  
</script>  

<style lang="scss" scoped>  
    .flex1-clz {  
        padding-top: 16rpx;  
        padding-left: 16rpx;  
        padding-bottom: 16rpx;  
        padding-right: 16rpx;  
    }  
    .icon1 {  
        font-size: 64rpx;  
    }  
    .text-clz {  
        margin-left: 0rpx;  
        margin-top: 10rpx;  
        margin-bottom: 10rpx;  
        margin-right: 0rpx;  
    }  
    .container335134 {  
    }  
</style>

更多关于uni-app 自定义组件循环slot在百度小程序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

确实这个问题,请官方修复!

更多关于uni-app 自定义组件循环slot在百度小程序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个百度小程序中slot循环渲染的兼容性问题。问题出在自定义组件diy-checkbox的slot作用域上。

在百度小程序中,循环slot的作用域变量传递存在限制。建议尝试以下解决方案:

  1. 修改自定义组件diy-checkbox的实现,确保在百度小程序环境下正确传递slot作用域变量

  2. 或者改用更简单的slot使用方式,避免在循环中使用作用域slot:

<diy-checkbox ...>
  <view v-for="(item, index) in questionTypes1" :key="index">
    <view class="flex text-left...">
      <!-- 内容 -->
    </view>
  </view>
</diy-checkbox>
  1. 检查百度小程序基础库版本,确保是最新版

  2. 如果问题仍存在,可以考虑在百度小程序环境下使用条件编译单独处理:

<!-- #ifdef MP-BAIDU -->
<!-- 百度专用实现 -->
<!-- #endif -->
回到顶部