uniapp tab切换 吸顶问题 onPageScroll(监听页面滚动距离)

tab位于页面非顶部时需要吸顶:当滚动的距离大于元素距离顶部的距离+元素本身的高度时才会吸顶。

onPageScroll是监听滚动的距离

onPageScroll(e) {

    var that = this;

    const query = uni.createSelectorQuery().in(that);

    query

      .select(".tab")

      .boundingClientRect((data) => {

        if (e.scrollTop > data.top + data.height) {

          //当大于距离顶部的高度+元素本身的高度时滚动。

          this.fixed = true;

        } else {

          this.fixed = false;

        }

      })

      .exec();

  },

对于uniapp动态组件吸顶tab的实现,你可以参考以下步骤: 1. 创建一个动态组件,用于展示tab内容。可以在组件中定义好tab的样式和布局。 2. 在页面中引入该动态组件,并将其作为一个子组件进行使用。 3. 使用uniapp提供的事件监听函数,监听页面滚动事件。 4. 在滚动事件的回调函数中,判断当前页面滚动位置是否超过了tab组件的位置,如果超过了,则将tab组件设置为吸顶状态,否则恢复正常状态。 下面是一个简单的示例代码: 在页面的template中: ```html <!-- 页面内容部分 --> <view style="height: 1000px;"></view> <!-- 引入动态组件 --> <template> <dynamic-tab :is-fixed="isTabFixed"></dynamic-tab> </template> ``` 在页面的script中: ```javascript import dynamicTab from '@/components/dynamicTab.vue'; export default { components: { dynamicTab }, data() { return { isTabFixed: false // 初始化tab组件是否吸顶 }; }, mounted() { // 监听页面滚动事件 uni.pageScrollTo({ scrollTop: 0, // 滚动页面顶部 duration: 0 // 立即滚动,没有动画效果 }); uni.onPageScroll((res) => { // 判断页面滚动位置是否超过tab组件的位置 if (res.scrollTop >= 200) { // 假设tab组件的位置为200px this.isTabFixed = true; } else { this.isTabFixed = false; } }); } } ``` 在动态组件dynamicTab的template中: ```html <template> <view :class="{'fixed': isFixed}"> <!-- tab内容 --> </view> </template> ``` 在动态组件dynamicTab的script中: ```javascript export default { props: { isFixed: { type: Boolean, default: false // 是否吸顶,默认为false } } } ``` 通过以上步骤,你可以实现一个uniapp动态组件吸顶tab的效果。当页面滚动到一定位置时,tab组件会固定在页面顶部,提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值