uni-app使用uni-list插件编译过程中uni-badge报错

uni-app使用uni-list插件编译过程中uni-badge报错

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

产品分类：uniapp/App

示例代码：

<template> <CommonContainer> <CommonBackViewUvue v-bind:title="title" v-bind:src="backSrc"></CommonBackViewUvue> <uni-list> <uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg" rightText="右侧文字"></uni-list-item> <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标"></uni-list-item> </uni-list> </CommonContainer> </template> ``` 
<script>
import CommonBackViewUvue from '../../components/CommonBackView.uvue';
type Item = {
algorithmTitle : string,
reginTitle : string,
sameTitle : string,
channelTitle : string,
channelOneText : string,
channelTwoText : string,
channelThreeText : string,
channelFourText : string,
snapImage : string,
snapBtnText : string,
samePercentageOne : string,
samePercentageTwo : string,
samePercentageThree : string,
samePercentageFour : string,
btnConfirmText : string
}
export default {
components: {
CommonBackViewUvue
},
data() {  
    return {  
        title: "抓拍设置",  
        backSrc: '/static/icon_back.png',  
        listData: [{  
            algorithmTitle: "算法使能",  
            reginTitle: "区域设置",  
            sameTitle: '识别相似度',  
            channelTitle: "通道1",  
            channelOneText: "1",  
            channelTwoText: "2",  
            channelThreeText: "3",  
            channelFourText: "4",  
            snapImage: "",  
            snapBtnText: "抓拍",  
            samePercentageOne: "20%",  
            samePercentageTwo: "20%",  
            samePercentageThree: "20%",  
            samePercentageFour: "20%",  
            btnConfirmText: "确定"  
        },  
        {  
            algorithmTitle: "算法使能",  
            reginTitle: "区域设置",  
            sameTitle: '识别相似度',  
            channelTitle: "通道2",  
            channelOneText: "1",  
            channelTwoText: "2",  
            channelThreeText: "3",  
            channelFourText: "4",  
            snapImage: "",  
            snapBtnText: "抓拍",  
            samePercentageOne: "20%",  
            samePercentageTwo: "20%",  
            samePercentageThree: "20%",  
            samePercentageFour: "20%",  
            btnConfirmText: "确定"  
        },  
        {  
            algorithmTitle: "算法使能",  
            reginTitle: "区域设置",  
            sameTitle: '识别相似度',  
            channelTitle: "通道3",  
            channelOneText: "1",  
            channelTwoText: "2",  
            channelThreeText: "3",  
            channelFourText: "4",  
            snapImage: "",  
            snapBtnText: "抓拍",  
            samePercentageOne: "20%",  
            samePercentageTwo: "20%",  
            samePercentageThree: "20%",  
            samePercentageFour: "20%",  
            btnConfirmText: "确定"  
        },  
        {  
            algorithmTitle: "算法使能",  
            reginTitle: "区域设置",  
            sameTitle: '识别相似度',  
            channelTitle: "通道4",  
            channelOneText: "1",  
            channelTwoText: "2",  
            channelThreeText: "3",  
            channelFourText: "4",  
            snapImage: "",  
            snapBtnText: "抓拍",  
            samePercentageOne: "20%",  
            samePercentageTwo: "20%",  
            samePercentageThree: "20%",  
            samePercentageFour: "20%",  
            btnConfirmText: "确定"  
        }  
        ] as Item[]  
    }  
},  
methods: {  

}  
</script> 

<style>
</style>

更多关于uni-app使用uni-list插件编译过程中uni-badge报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

目前只有部分uni-ui组件支持了uniapp-x，如果有些组件报错了，你可以先尝试自己修改下，或者插件市场里寻找那些支持 uniapp-x的组件库。

更多关于uni-app使用uni-list插件编译过程中uni-badge报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据提供的代码和问题描述，uni-badge报错可能由以下几个原因导致：

  1. 缺少uni-badge组件依赖。uni-list-item的rightText属性会自动生成uni-badge组件，但项目中可能未正确引入。

解决方案： 在script部分添加uni-badge组件导入：

import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'
export default {
  components: {
    CommonBackViewUvue,
    uniBadge
  }
}
  1. 版本兼容性问题。确保使用的uni-ui版本与uni-app版本匹配，建议更新到最新版：
npm update @dcloudio/uni-ui
  1. 如果使用easycom自动导入，检查pages.json配置：
"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
  }
}
  1. 样式冲突问题。虽然示例中<style>为空，但实际项目中可能有全局样式影响了badge显示，可以尝试添加scoped：
<style scoped>
</style>
回到顶部