美文网首页
weex布局问题

weex布局问题

作者: shaguamayi | 来源:发表于2018-06-25 14:57 被阅读0次

weex vue项目;我们经常会遇到上中下三部分布局的,上边固定,下边固定,中间根据内容,内容多了可以滚动,有两种方式实现,第一种就是中间给scroller加个固定高,第二种就是给上下加fixed定位,但是fixed定位,当页面跳转时,fixed部分却没有消失,而是重复在跳转后的页面里,目前不清楚什么原因,第三种就是根据absolute定位来做,第一,二种简单就不叙述了,放上第三种的代码
也是官方给的例子:

<template>
  <div class="box">
    <div class="info">
      
    </div>
    <div class="bottom"></div>
  </div>
</template>
<style type="text/css" media="all">
  .box{
    width:750px;
    position:absolute;
    top:0;
    bottom:0;
    background-color:#000;
  }
  .info{
    position:absolute;
    top:0;
    width:750px;
    height:100px;
    background-color:red;
  }
  .bottom{
    position:absolute;
    left:0;
    right:0;
    top:100px;
    bottom:0;
    background-color:yellow;
  }
</style>

但是目前还没有做好客户端交互方面,无法在真机测试,等真机测试完美问题,再来补充,先写上。

相关文章

  • weex布局问题

    weex vue项目;我们经常会遇到上中下三部分布局的,上边固定,下边固定,中间根据内容,内容多了可以滚动,有两种...

  • Weex技术相关

    Weex官方地址:http://alibaba.github.io/weex/cn/doc/ 布局技术:Flex-...

  • flex 总结

    布局相关 所有 Weex 组件都支持以下通用样式规则。 盒模型 Weex 盒模型基于 [CSS 盒模型],每个 W...

  • weex布局练习

    weex官网Flxbox布局指南 Flex练习demo1 http://dotwe.org/vue/24dd81e...

  • Weex-Android Bug之修改input标签type无效

    问题描述:Weex的input(https://weex.apache.org/zh/docs/component...

  • VSCode weex debug src 出现问题

    weex debug src 出现问题 当新建完一个weex项目之后,想试试weex debug src调试页面的...

  • Weex问题

    在weex执行weex提示vue和vue-compiler不匹配的情况下,需要检测是否存在vue污染。执行代码在 ...

  • 由 FlexBox 算法强力驱动的 Weex 布局引擎

    前言 在上篇文章里面谈了Weex在iOS客户端工作的基本流程。这篇文章将会详细的分析Weex是如何高性能的布局原生...

  • weex快速入门资料

    Ui布局介绍 1.最基础的UI控件:http://weex.apache.org/cn/references/co...

  • flex两栏布局

    code 之前看到weex的官方文档的网页布局发现它的效果挺不错的,于是自己花了点时间把布局模仿了一下。

网友评论

      本文标题:weex布局问题

      本文链接:https://www.haomeiwen.com/subject/zdjyyftx.html