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

简介: 在van-tab中写入内容使其中间部分进行滚动

所实现效果:

38d82a7fda68480791b6fc7348bdbf53.gif

看一下官网

77843eb3c4c3458c974ea2638caf74d6.png

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

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

f25bb14bda9d4bd695680b22fa8263e3.png

分离写法为上图所示

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

abda4858396647718d6e2cbbc37b58e2.png

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

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

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

b52581b416664cde954621363848d2d1.png

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 = ;
  },

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

5f86e3cdeea8499280f639ab4de971b3.png

本身的clientHeight不是我们想要的高度,所以直接获取可见高度,并把可见高度给我们的这个clientHeight

c5b37b4bb0c64535abb07ebd52cd26dd.png

再查看一下发现已经更改完成

5b165611486f470899a855daee2e0617.png

即可只使中间内容进行滚动  

相关文章
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
25天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
22 1
|
25天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
25天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
25天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1059 0
|
28天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
32 1
vue学习第一章
|
28天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
26 1
vue学习第三章