vant ui tab标签页,页签切换时滚动相互受影响,滚动距离与上一个浏览的页面同步

本文解决了页面中tab切换时滚动条同步的问题。通过调整容器样式,取消van-tabs__content的固定样式,并在子容器中设置滚动样式,实现各页签独立滚动。

问题描述:
页签切换时滚动相互受影响,滚动距离与上一个浏览的页面同步

页面布局
在这里插入图片描述

导致原因:
直接在van-tabs__content容器上设置的,就会导致公用一个导航条

height: 100%;
overflow: hidden;
overflow-y: auto;

解决办法:
取消掉van-tabs__content的样式
在各自的audit-list容器内去设置

height: 100%;
overflow: hidden;
overflow-y: auto;
### 小程序 Vant UI Tab 标签页插槽自定义文字 在小程序开发中,`Vant WeApp` 提供了一个灵活的 `Tab` 组件来实现标签页功能。如果需要通过插槽来自定义文字,则可以利用其支持的插槽机制完成个性化需求。 #### 插槽概述 `Vant WeApp` 的 `Tab` 组件提供了默认插槽以及命名插槽的支持,允许开发者覆盖默认的文字显示逻辑。具体来说,可以通过 `<view slot="title">...</view>` 或者直接嵌套子节点的方式来自定义每个 tab 的标题内容[^3]。 #### 实现方式 以下是具体的实现代码示例: ```html <!-- WXML --> <van-tabs> <!-- 第一种方式:使用slot属性 --> <van-tab title="基础"> <view>这是第一个的内容</view> </van-tab> <!-- 第二种方式:通过插槽自定义 --> <van-tab> <view slot="title"><text style="color:red;">自定义文字1</text></view> <view>这是第二个标的内容</view> </van-tab> <!-- 第三种方式:直接作为子节点 --> <van-tab> <view><text style="font-size:20px;">自定义文字2</text></view> <view>这是第三个标的内容</view> </van-tab> </van-tabs> ``` 上述代码展示了三种不同的自定义方式: 1. **直接设置 `title` 属性**:适用于简单的纯文本场景。 2. **通过 `slot="title"` 定义插槽**:适合更复杂的 HTML 结构或样式调整。 3. **将自定义内容作为子节点传递给 `van-tab`**:这种方式更加直观,尤其当需要动态渲染复杂结构非常有用。 #### 配置注意事项 为了确保自定义效果正常工作,在项目初始化阶段需确认以下几点配置已正确完成: - 在 `app.json` 文件中的 `tabBar` 节点下指定了 `custom` 字段,并完成了必要的兼容性处理[^5]。 - 如果涉及底部导航栏定制化,则应按照官方文档指引创建对应的 `custom-tab-bar/index.*` 文件并注册到全局配置中[^2]。 此外,对于滚动加载更多数据的需求,可结合 `bindscrolltolower` 方法监听触底事件触发回调函数更新列表状态[^4]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值