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

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

相关文章
|
16小时前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
16小时前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
14 0
|
16小时前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
16小时前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
17 0
|
16小时前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
16小时前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
16小时前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
16小时前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
16小时前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
16小时前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
13 1