weex踩坑之旅第四弹 ~ weex页面布局(定位布局)

习惯了web页面的开发一开始还真不太适应weex的写法,css有很多限制。不过时间长了感觉也可以,限制多,用的少,需要研究的东西也就少。对于weex的页面布局,我觉得有以下需要注意的点

1. 盒子模型

官方说的很明白,我这边再提示一下:
Weex 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。

weex踩坑之旅第四弹 ~ weex页面布局(定位布局)_第1张图片

css样式目前不支持速写形式,例如:border: 1 solid #ff0000; 的组合写法,在书写的时候需要单独设定。

2. 定位布局

Weex 支持 position 定位,用法与 CSS position 类似。为元素设置 position 后,可通过 top、right、bottom、left 四个属性设置元素坐标。position的取值可以为:relative、absolute、fixed、sticky。定位布局的细节我在这里不赘述,如果需要了解,可以自行google,我这里只是说明应该在什么场景下使用定位布局。

3. 为元素设定高度

由于代码最终运行的终端不一定,如果我们直接给容器设定一个固定高度,在不同的环境下显示可能不同。默认容器的高度由其内容决定。如果我们想进行上中下布局,上方下方容器的高度固定,均为120px;剩余的空间中间容器占满。实现方式有好多种,先使用定位布局来实现。


weex踩坑之旅第四弹 ~ weex页面布局(定位布局)_第2张图片

了解此基础我们再进行布局。绝对定位相对距其最近的父元素(并且父元素为相对定位元素)进行定位。


为什么要给容器设定高度呢?因为有些组件必须其父组件具有高度,比如

weex踩坑之旅第四弹 ~ weex页面布局(定位布局)_第3张图片

布局好了之后,我们可以在中间容器中放一个可以滚动的组件,头部脚部不动,中间内容滚动。

css代码片断如下

/*使用flex布局显示数据*/
.panel {
    height: 100px;
    flex-direction:row;
    justify-content:center;
    align-items: center;
    border-bottom-color: #ededed;
    border-bottom-width: 1px;
}
/*设定每一部分占得份数*/
.f1{
    flex: 1;
    text-align: center;
}
/*设定每一部分占得份数*/
.f3 {
    flex:3;
    text-align: center;
}

js代码片断如下

export default {
        data:()=>({
            refreshing:false,
            lists:stuData
        }),
        methods:{
            //刷新
            onrefresh(){
                this.refreshing = true
        setTimeout(() => {
          this.refreshing = false
        }, 1000)
            }
        }
    }

你可能感兴趣的:(vue.js,weex,position)