vue:使用v-for写入:style中图片做背景

本文深入探讨了Vue中荣誉展示组件的实现细节,包括如何使用v-for循环渲染荣誉列表,如何根据状态代码改变荣誉图标样式,以及如何通过按钮触发荣誉领取操作。文章还提到了在:style中设置背景图片时的注意事项。
<div class="honor_row" v-for="(item,i) in points.awardList" :key='i'>
                <span class="radius200 " :style="{'background': 'url('+imgDomain+item.filePhysPath+') no-repeat center center'}" :class="item.sttusCode == '14002'?'honor-light':'honor-nolight'">
                </span>
                <el-button v-if="item.sttusCode == '14001'" type="primary" plain @click="showdialogHonor(item.awardName,item.awardId)">领取荣誉</el-button>
              </div>

:style里面不能有;号
键值要有’'括起来

你的 `pages.json` 配置中已经正确设置了 `"custom": true`,并且结构基本完整,但 **自定义 TabBar 仍然不显示**,说明问题出在 **文件未被编译或路径不符合小程序原生规则** 上。 --- ## ✅ 核心原因:你缺少了关键组件 —— `custom-tab-bar/index.vue` > 即使你在 `pages.json` 中写了 `"custom": true`,如果项目根目录下没有 `custom-tab-bar/index.vue` 文件,微信小程序 **根本不会渲染任何底部栏**! 这是 UniApp 自定义 tabbar 的硬性要求: ### 🔥 必须满足以下所有条件: | 条件 | 是否满足 | |------|----------| | ✅ 存在 `custom-tab-bar/index.vue`(必须是 `index.vue`) | ❌ 很可能缺失 | | ✅ 文件位于项目根目录(不是 `/src` 或子目录) | ❌ 常见错误 | | ✅ 所有 tab 页面都在 `tabBar.list` 中声明 | ✅ 满足 | | ✅ 使用 `uni.switchTab()` 切换页面 | ✅ 应该满足 | | ✅ 编译后生成了 `/dist/dev/mp-weixin/custom-tab-bar/` 目录 | ❌ 若无文件则不会生成 | --- ## ✅ 解决方案:立即创建 `custom-tab-bar/index.vue` ### 📁 步骤 1:创建文件夹和文件 在你的项目根目录(与 `pages.json` 同级)创建: ``` custom-tab-bar/ └── index.vue ``` > ⚠️ 不是 `/src/custom-tab-bar`,也不是 `/components/custom-tab-bar`,**必须是项目根目录!** --- ### 🧩 步骤 2:写入最简可用的 `index.vue` 内容(用于测试) ```vue <template> <view class="tab-bar" style="display: flex; height: 50px; background-color: red; position: fixed; bottom: 0; left: 0; right: 0;"> <view v-for="(item, index) in tabBarList" :key="index" class="tab-bar-item" style="flex: 1; text-align: center; line-height: 50px;" @click="switchTab(item.pagePath)"> {{ item.text }} </view> </view> </template> <script setup> import { ref, onMounted } from 'vue' const tabBarList = [ { pagePath: 'pages/home/index', text: '首页' }, { pagePath: 'pages/list/index', text: '列表' }, { pagePath: 'pages/user/index', text: '我的' } ] const selected = ref('') const switchTab = (pagePath) => { uni.switchTab({ url: '/' + pagePath }) } onMounted(() => { const pages = getCurrentPages() const currentPage = pages[pages.length - 1] selected.value = (currentPage.route || 'pages/home/index') }) </script> <style scoped> /* 这里可以留空,因为我们用内联样式测试 */ </style> ``` --- ## ✅ 步骤 3:重新编译并验证 ### 🔁 清理缓存(关键!) 删除以下目录: - `unpackage/` - `dist/` 然后重新运行项目: ```bash npm run dev:mp-weixin ``` 或使用 HBuilderX 点击 “运行到微信开发者工具” --- ## ✅ 步骤 4:检查是否生效 ### 方法 1:看微信开发者工具是否有红色条 底部应该出现一个 **红色背景的 tabbar**,里面有三个文字:“首页”、“列表”、“我的” ✅ 出现了 → 成功加载 `custom-tab-bar` ❌ 没出现 → 继续排查 --- ### 方法 2:查看编译输出目录 打开: ``` /dist/dev/mp-weixin/custom-tab-bar/ ``` 你应该看到这些文件: - `index.js` - `index.json` - `index.wxml` - `index.wxss` ✅ 存在 → 被编译了 ❌ 不存在 → 文件路径错误或 IDE 未识别 --- ### 方法 3:控制台打印日志 在 `onMounted` 中加一句: ```js console.log('[CustomTabBar] Loaded!', selected.value) ``` 在微信开发者工具 Console 查看是否有输出。 --- ## ✅ 补充建议:修复 `window` 和 `globalStyle` 冗余配置 你同时写了 `globalStyle` 和 `window`,这是重复的。保留一个即可。 推荐只保留 `globalStyle`: ```json "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } ``` 删掉单独的 `"window": { ... }`,避免冲突。 --- ## ✅ 最终确认清单 | 检查项 | 是否完成 | |-------|---------| | ✅ 创建了 `custom-tab-bar/index.vue` | ☐ | | ✅ 放在项目根目录 | ☐ | | ✅ 文件名是 `index.vue`(不是 TabBar.vue) | ☐ | | ✅ 清理缓存并重新编译 | ☐ | | ✅ 微信开发者工具能看到红色条或 DOM 结构 | ☐ | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值