u-tabs空数据渲染/无法切换的问题

        我接手的项目是1.X的uview,u-tabs在切换时有时会出现无法切换的问题,实际测试发现”current”发生改变,但UI没有发生改变,因为之前是正常的,一番折腾下来后发现在切换后如果页面相似度过高,就有大概率会发生无法触发UI更新的问题。

       解决方法为每次修改时渲染的数据最好发生一些变化(更改节点结构)比如

<view v-show="questionList.length==0" class="test_">
    未查询到{{tabsList[tabCurrent].name}}相关信息
</view>

        测试后发现,即便页面重新跳转( redirectTo)到该项页面仍无法实现UI更新的效果,其中tabbar的切换也无法实现UI更新,但在页面跳转之后UI出现更新。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
u-tabs 可以通过控制 tab 激活状态和对应 pane 的显示状态来实现滑动切换。具体的实现步骤如下: 1. 在 HTML 中定义 tab 和 pane 的结构,如下所示: ``` <div class="u-tabs"> <div class="u-tabs__header"> <div class="u-tabs__item active">Tab 1</div> <div class="u-tabs__item">Tab 2</div> <div class="u-tabs__item">Tab 3</div> </div> <div class="u-tabs__content"> <div class="u-tabs__pane active">Content 1</div> <div class="u-tabs__pane">Content 2</div> <div class="u-tabs__pane">Content 3</div> </div> </div> ``` 2. 使用 CSS 对 tab 和 pane 进行样式设置,如下所示: ``` .u-tabs__header { display: flex; border-bottom: 1px solid #ccc; } .u-tabs__item { padding: 10px; cursor: pointer; } .u-tabs__item.active { background-color: #f5f5f5; } .u-tabs__pane { display: none; } .u-tabs__pane.active { display: block; } ``` 3. 使用 JavaScript 代码对 tab 进行事件监听,并控制对应的 pane 显示和隐藏,如下所示: ``` const tabs = document.querySelectorAll('.u-tabs__item'); const panes = document.querySelectorAll('.u-tabs__pane'); tabs.forEach((tab, index) => { tab.addEventListener('click', () => { // 切换激活状态 tabs.forEach((t) => t.classList.remove('active')); tab.classList.add('active'); // 切换显示状态 panes.forEach((pane) => pane.classList.remove('active')); panes[index].classList.add('active'); }); }); ``` 以上就是使用 u-tabs 实现滑动切换的基本步骤。需要注意的是,如果需要实现滑动效果,还需要使用一些 CSS 技巧和 JavaScript 动画库来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值