Taro，NutUI4-vue3 小程序Tabs组件显示不全

最新推荐文章于 2024-12-02 15:26:24 发布
最新推荐文章于 2024-12-02 15:26:24 发布
阅读量449 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： taro 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Midnight_i/article/details/131944543
文章讲述了在使用NutUI组件库时遇到Tabs显示异常的问题，控制台报错teml_0_51notfound。作者尝试了设置cache为false但未见效。最终，通过对比官网GitHub上的nutui-demo，发现在package.json中，@tarojs/plugin-platform-weapp的版本与官方不同。作者卸载并重新安装了指定版本后，问题得到了解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

NutUI组件Tabs显示有问题，控制台提醒'teml_0_51' not found：

寻求别人帮助说是 cache设为false，然而自己本地一直都是false的。

最后对照官网GitHub的nutui-demo，发现package.json：@tarojs/plugin-platform-weapp的版本和taro一样，而我本地不一样，然后卸载再安装指定版本，问题就解决了。

Midnight_i
关注
Taro+NutUI+Vue3+TypeScript自定义Tabbar
qq_34111842的博客
11-28 2289
在src -> components根目录下新建一个custom-tab-bar文件夹，新建一个customTabBar.vue。在不同的tab页面通过current去控制当前第几个页面的索引。即可在微信开发者工具看到效果。
修改taro-ui-vue3的tabs组件源码增加数字标签
hanchengmei的博客
04-16 639
需求：taro-ui-vue3的tabs组件上增加数字标记。
第一次打开taro项目报错：Module not found: Can‘t resolve ‘@nutui/nutui-taro‘ site:blog.youkuaiyun.com
认真，努力，记录学习
11-03 6346
文章目录前言一、配置webstorm二、打开项目1.错误信息2.安装taro三、解决方案 前言 在今天我准备开始学习新的框架：taro，然后喔朋友发了一个taro项目给我，我试了一下打开，然后遇到了不少问题，该文章只是为了记录问题和解决方案 一、配置webstorm 首先将项目放到webstorm中打开，进行配置，别问为什么不用vscode （因为试了很多次打不开，我一个朋友才要我用webstorm试试的） webstorm配置如图： 该文件是h5的，所以我这里scripts的选项才选的h5 二、打开
taro+vue3 + nut-popup微信小程序真机不显示问题
weixin_44012931的博客
12-02 689
最近开发小程序项目，用taro + vue3+ ts 生成的模版代码。在使用nut-ui组件库时，发现 nut-popup 组件在微信小程序模拟器中是正常显示，真机预览也是正常显示，但实际发送到体验版时，弹窗没有正常显示，只显示了黑色遮罩层，没有内容部分。
问题记录：taro小程序调用nutui的tab选项卡组件，点击标题出现回弹问题
Avengerrr的博客
08-21 445
需求：选项卡组件，设定在一个固定高度的容器内显示。当选项卡高度超出容器高度时，实现组件滚动显示。出现问题：组件能正常滚动显示，但是当点击超出容器高度的选项时，tab选项卡的标题总是回跳到顶部。情况： taro小程序，nutui的tab选项卡组件。
Taro组件没写错就是不显示，解决方法
caarrrrite的博客
01-16 1726
这个问题困扰了我一天，区别就在于一个地方 这句话里 export default class course extends Component { 不能用Taro.Component 要不然样式就不会显示 最后引用是这样写的
taro开发微信小程序-配置tab页面
Kingpin的博客
07-04 1724
taro开发微信小程序,taro框架目前是移动端的混合全能框架,对于微信小程序平台编译优秀,taro结合webpack可以编译微信小程序,anroid,ios,H5等平台代码,taro ui是基于taro的一套ui界面库。本栏博客介绍如何使用使Trao和Taro UI框架来开发移动端微信小程序. 1.在项目开发文件夹中新建2个文件夹-配置2个tab页面 index/index.js me/me...
干货|基于Taro框架开发微信小程序如何配置实现自动格式化和代码规范
m0_61998604的博客
10-23 406
这样，保存文件时就可以自动按照 ESLint 和 Prettier 的规则进行格式化，保持代码的一致性和规范性。： 在微信开发者工具的插件市场中搜索并安装 ESLint 和 Prettier 插件。： 确保项目根目录下有一个。
Bug 解决 | 组件库报错、或样式丢失不生效
weixin_48916444的博客
08-07 2163
我相信很多同学在做项目的时候都会遇到组件库相关的问题， 明明用了这个样式怎么不生效？为什么还报错了？其实很多时候不是咱们用的不对，是我们使用的组件库更新了！老的代码和新的版本不兼容，导致的各种问题。分享一些组件库报错或样式丢失的案例，供大家参考。
react CascaderView组件选择器选择标识不显示问题
zuotianxian的博客
01-17 542
使用组件的时候，给initValue赋值之后，选择器就一直出现数据实际已经选上，但是选中标识不显示，并且选择二级数据之后就返回一级的问题。看了官方文档之后说要双向绑定value,但是经过多次尝试还是没能解决。对于刚接触react的小白，这个问题缠绕了我好几天，百思不得其解。记录下，希望下次避坑。就改变方式，重新给选中项赋值，就完美解决了这个问题。最终，看到了这个属性。
vue3+taro+nutui+pina小程序空白框架
03-25
vue3+taro+nutui+pina小程序空白框架
taro--之使用nutui组件库
m0_74433188的博客
03-24 1364
NutUI 4.0 移除了 babel-plugin-import 插件的使用，按需引入样式不再依赖于 babel，开发者可以选择其他效率更高的编译工具。同时，NutUI 适配了支持自动引入和注册组件的 unplugin-vue-components 插件，这将使 Taro 的开发体验有所提升。配置完成后，可以直接在模板中使用 NutUI 组件，unplugin-vue-components 插件会自动注册对应的组件，并按需引入组件样式。4、在 webpack 下使用按需引入时组件没有类型提示。
vue3 taro-ui-vue3 封装Tabbar组件
weixin_43761212的博客
03-25 4049
提示：使用 vant-weapp,Taro,vant-weapp,vue3 文章目录前言一、创建 Tabbar组件二、页面引入1.目录结构 前言 提示：请在 app.config.ts 文件内引入： usingComponents: { "van-button": "@vant/dist/button/index", "van-icon": "@vant/dist/icon/index", "van-tabbar": "@vant/dist/tabbar/index", .
微信小程序自定义tabbar taro + vue3
Xiaoxiao_Zheng的博客
05-30 1565
微信小程序自定义tabbar需求根据用户角色动态显示tabbar技术栈tarotaro uivue3实现微信小程序api地址taro api地址遇到的问题1 taro版本不对导致不显示排查问题： 需求 根据用户角色动态显示tabbar 技术栈 taro taro ui vue3 实现 微信小程序api地址 链接: link. 可以按照demo 实现， taro api地址 项目中用的 vue3 , 采用了taro 框架，所以参考taro 的实现方式 链接: link. 可以直接参考demo 遇到的问题
Taro+ vue3 + template nut-ui 4.0 + pinia 的前端框架模板搭建
阿乐的博客
02-10 1588
​Taro是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信京东百度支付宝字节跳动QQ飞书小程序 / H5 / RN 等应用。现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
taro+NutUI
qq_62237888的博客
10-25 788
Tora+NutUI
手写移动端导航栏（仿京东）实例【VUE3】
一键难忘的博客
03-16 1782
class="{ active: currentIndex === index }：主要作用于文字选中下标红色，如果currentIndex（当前页面下标）和index （循环下标）相同时，返回Ture，class标签新加active，下面css代码有所体现。测试没有问题，写的时候吧内容放到了下面，不过功能已经实现，这个并不重要，介意的直接把app.vue里的内容和导航栏互换一下位置，然后把导航栏进行一个绝对定位即可完成。methods：方法，这里写自定义函数，目的，获取子组件传参，进行改变页面内容。
【Vue3.0移动端项目--旅游网】--配置tabBar &首页搭建
贤蛋大眼萌
08-18 1484
用插槽，出入自己的元素—> 那么在自己的作用域中可以直接修改这个元素全局定义一个变量，覆盖它默认的变量值—>需要全局修改（不推荐）布局定义一个变量，覆盖它默认变量的值—> 布局修改直接找到对应子组件的选择器，进行修改—> 使用:deep(子组件中元素的选择器)进行修改—>直接修改CSS样式。...
Taro+nutui h5使用nut-signature 签名组件的踩坑记录之使用canvas实现一个签名组件
weixin_44514665的博客
01-01 2170
taro兼容h5实现签名功能,以及签名不清晰问题
taro自定义tabbar+nutui
最新发布
03-11
### 关于 Taro 框架中自定义 TabBar 并与 NutUI 组件库集成的方法 #### 使用 Component 构造器创建自定义 TabBar 在 Taro 中构建自定义 `TabBar` 需要利用小程序的 `Component` 构造器来完成。对于样式隔离问题，可以通过配置 `addGlobalClass: true` 来解决特定组件（如 `<IconFont />` 图标）可能遇到的显示异常情况[^1]。 ```javascript export default { options: { addGlobalClass: true, }, }; ``` 此选项允许全局样式应用于该页面内的所有节点，从而确保像字体图标这样的元素能够按照预期渲染。 #### 处理安全区域适配 针对底部的安全区留白(`safe-area-inset-bottom`)调整，虽然设置了相应的 CSS 属性使图标和文字能正确定位，但为了保证整个 `TabBar` 的背景高度适应不同设备屏幕比例的变化，在实际项目中还需要进一步优化布局逻辑或者通过媒体查询等方式动态计算并设置合适的高度值。 #### 将 NutUI 和 Taro 结合起来使用 NutUI 是一套基于 Vue 技术栈设计的小程序 UI 库，它提供了丰富的预设组件以加速开发流程，并且已经兼容了 Taro 开发环境[^3]。因此，在实现了上述基础功能之后，就可以很方便地引入 NutUI 提供的各种美观实用的控件到自己的应用程序当中去了： - 安装依赖包：`npm install @nutui/nutui-taro --save` - 在 App.vue 或 index.js 文件里注册所需模块 - 接下来便可以在任何地方调用这些封装好的接口啦！ 例如，如果想让 tab 页面切换更加平滑自然的话，则可以直接选用其中名为 “Tabs” 的导航栏组件；而当涉及到表单验证场景时，“Form”，“InputNumber” 等也是不错的选择之一。 ```html <template> <view class="container"> <!-- 导航 --> <nut-tabs v-model:index="activeIndex" color="#ff0000"> <nut-tab-pane title="首页">内容一</nut-tab-pane> <nut-tab-pane title="分类">内容二</nut-tab-pane> <nut-tab-pane title="购物车">内容三</nut-tab-pane> <nut-tab-pane title="我的">内容四</nut-tab-pane> </nut-tabs> <!-- 主体部分省略 --> <!-- 自定义 tabBar --> <custom-tab-bar /> </view> </template> ``` 以上就是有关如何借助 Taro 创建个性化标签栏以及怎样无缝对接第三方视觉资源的一些建议。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值