vant/vue——在van-tab中写入内容使其中间部分进行滚动

最新推荐文章于 2024-09-04 10:35:16 发布

Southern Wind

最新推荐文章于 2024-09-04 10:35:16 发布

阅读量5.8k

点赞数 4

分类专栏： vant 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/nanchen_J/article/details/121831885

版权

vant 专栏收录该内容

40 篇文章 6 订阅

订阅专栏

本文介绍如何在响应式设计中，通过JavaScript遍历和动态调整每个tab内容区（section）的高度，以实现屏幕适配，仅中间内容滚动。使用ref获取屏幕高度并减去固定部分高度，确保在不同设备上提供流畅的用户体验。

摘要由CSDN通过智能技术生成

所实现效果：

看一下官网

官网给出的写法是在这个标签里面写入内容，并不是分离式布局

如果是分离式的话比较好写，直接让头部固定，底部固定即可使中间部分滚动

分离写法为上图所示

这里分离写法就不演示了，主要说一下如何在遍历后的tab栏里面让中间内容部分进行滚动

因为一个tab栏要用到一个盒子

所以要给每个盒子设置一个样式比如section

用ref去获取整个屏幕的高度，就拿iPhone6/7/8为例上下固定的高度一共为135px

  updated() {
    var aa = this.$refs.aa;
    console.log(aa);
    for (let i = 0; i < aa.length; i++) {
      console.log(aa[i]);
      aa[i].style.height = document.documentElement.clientHeight - 135 + "px";
    }
    var bb = document.documentElement.clientHeight - 135 + "px";
    aa = bb;
    console.log(aa);
    // aa.style.height = ;
  },

多个相同的样式就需要遍历一下