`

vux固定标题栏和导航栏的坑

 
阅读更多

所有父级元素包括view-box指定height:100%

手动指定view-box的padding-bottom和padding-top

文档上说可以用body-padding-top和body-padding-bottom这两个属性指定,实际上这是错误的

正确的是bodyPaddingBottom和bodyPaddingTop。错误的文档坑死人不偿命

 

<view-box :bodyPaddingBottom="bodyPaddingBottom" :bodyPaddingTop="bodyPaddingTop">

 动态设置

        mounted: function () {
            this.bodyPaddingTop = this.$refs.header.$el.clientHeight  + 'px';
            this.bodyPaddingBottom = this.$refs.bar.$el.clientHeight  + 'px';
        },

 另外自己设计固定栏的话为了避免内容庶盖要给容器指定box-sizing: border-box;然后再设置padding或者插入一个空的div

border-box的意思是边框和补白不计入容器内容高度

 

分享到:
评论

相关推荐

    Vux基于Vue和WeUI移动端UI组件

    Vux:基于 Vue 和 WeUI 移动端 UI 组件

    Vux 前端文档

    Vux 前端文档

    vux-2项目集成方案,前端UI框架vux

    vux-2项目集成方案,基于h5, js,vue,webpack,vue-router, vuex等。前端UI框架vux

    vux项目Memo.zip

    webpack + vuex + vue + vux 项目demo demo下载下来解压,安装完依赖可以正常运行 "node": "&gt;= 4.0.0" "npm": "&gt;= 3.0.0

    vux 全国省市县数据 下载

    vux 省市县数据 内容描述: export const address=[{ name: "北京市", parent: "0", value: "110000" }, { name: "北京市", parent: "110000", parentAreaName: "北京市", value: "110100" }, { name:...

    基于vue的vux项目工程模板

    基于vue的vux项目工程模板

    vux 快速使用指南

    Vuex is a centralized state management architecture for building lientside web applications. It exploits the Vue.js reactivity system to perfectly integrate into Vue.js applications. ...

    vux-upload:vux上传组件

    vux-upload实现的功能基于vux,适合vux项目增加了删除功能增加图片预览功能增加自定义headers、data 、withCredentials等增加beforeUpload钩子,增加success、error、remove等事件示例快速使用npm install vux-...

    vue使用vux做移动UI

    vue使用vux做移动UI,使用Cordova打包成ios和Android,还有极光推送,地图,分享,浏览器,上次图片等插件

    vuecli整合vux打造webapp的项目脚手架

    vue-cli整合vux,打造webapp的项目脚手架

    vue ui架框vux

    vue ui架框vux vux demo node_modules

    基于laravel-vue--vux-element的视频投票系统.zip

    基于laravel-vue--vux-element的视频投票系统 基于laravel-vue--vux-element的视频投票系统 基于laravel-vue--vux-element的视频投票系统 基于laravel-vue--vux-element的视频投票系统 基于laravel-vue--vux-element...

    vuxuploader是一个vue的上传组件是对vux组件库的一个补充

    基于vux,适合vux项目 暂时不支持vux $t方式的多语言功能 增加了删除按钮,点击则删除第一张图片 内置图片上传、增加、删除功能,但暂时每次只能操作一张图片 接上,允许用户监听事件,自己实现上传、增加、删除...

    Vue中使用vux配置代码详解

    一、根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=...

    使用vux实现上拉刷新功能遇到的坑

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = ‘default', 2.问题:不能滚动...

    详解如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux。  其实项目里组件库可以...

    Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑。下面简单说下安装vux 的过程。 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install ...

    VUX:基于Vue和WeUI的移动UI组件-开源

    是的,VUX仍然有很多问题,虽然还远远不能完美,但是一直都在解决这些问题。 如果您正在使用它而感觉有一些问题,则不妨打开一个问题并提供反馈。 我们很乐意为您解决问题的详细说明。 是的,没有团队维护。 大多数...

    vux-cli3-loader:vux-cli3-loader

    特别说明,为了实现按需加载,请安装配套的插件,还有确保项目中已经安装了less和less-loader 安装vux-cli3-loader、babel-plugin-vux-cli3 $ npm install vux-cli3-loader babel-plugin-vux-cli3 -D 配置vux.config...

Global site tag (gtag.js) - Google Analytics