请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 list 如何横向布局

8
回复
107
查看
[复制链接]

5

主题

11

帖子

80

积分

 楼主| 2018-11-11 22:34:54 显示全部楼层 |阅读模式
本帖最后由 J.哥 于 2018-11-11 22:40 编辑

list 如何横向布局?

A B C

C E F
G H I

像这样3*3  的布局

我的 主界面 有个div
<div class="demo-page">



<block for="caipuList">
        <list-item class="caipu-type-item">
          <stack class="caipu-type-one-one">
            <image class="caipu-type-one-image" src="../Common/MainImage/{{$item.parentId}}.jpg"></image>
            <text class="caipu-type-one-name">{{$item.name}}</text>
          </stack>
        </list-item>
      </block>




</div>




.demo-page {
    flex-direction: column;


  }
.caipu-type-item {
    width: 100%;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 50px;
    align-items: center;
    align-content: center;
    columns: 2
  }

但是我的caipu-type-item 中的 flex-direction: row; 没有效果





QQ截图20181111223252.png
回复

使用道具 举报

3

主题

68

帖子

655

积分

2018-11-12 09:06:36 显示全部楼层
  1. <div class="demo-page">
复制代码
改为
  1. <list class="demo-page">
复制代码
试试
回复

使用道具 举报

5

主题

11

帖子

80

积分

 楼主| 2018-11-12 21:01:37 显示全部楼层
dadong聊天中……[离线]关闭
查看与dadong的聊天记录访问dadong的空间
J.哥: 关于您在“list 如何横向布局”的帖子
还是不行。

我的页面是这样的
<template>
  <div class="demo-page">
    <text class="hello">Hi客官{{hellotitle}}好!</text>
    <div class="seachspan">

      <input type="text" class="seacheating" maxlength="16" placeholder="{{hellotitle}}想吃点什么?" value="{{eatingInput}}" @change="bindPhoneChange"
      />
      <input class="soutu-btn" type="button" value="搜一下" onclick="searchEating" />
    </div>

    <text class="tuijian">推荐</text>
  
    <text class="clstjnametwo" show="{{hasData}}">{{tjnametwo}}</text>
   
    <list class="list-cls">
      <block for="articleList" show="{{hasMoreData}}">
        <list-item onclick="clickOpen($item.id, $item.albums[0], $item.title,$item.ingredients,$item.burden,$item.tags,$item.steps,$item.imtro)">
          <text class="clstjnameone">{{$item.title}}</text>
        </list-item>
      </block>
      <list-item>
        <text class="caipu">菜谱</text>
      </list-item>
      <block for="caipuList">
        <list-item class="caipu-type-item">
          <stack class="caipu-stack">
            <image class="caipu-type-one-image" src="../Common/MainImage/{{$item.parentId}}.jpg"></image>
            <text class="caipu-type-one-name">{{$item.name}}</text>
          </stack>
        </list-item>
      </block>
    </list>

  </div>
</template>

<style>
  .demo-page {
    flex-direction: column;
    width: 100%;

  }

  .hello {
    font-size: 40px;
    color: rgb(233, 81, 10);
    margin-top: 20px;
    text-align: center;

  }

  .seachspan {

    flex-direction: row;
    width: 100%;
    height: 86px;
    align-items: center;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;

  }

  .seacheating {
    padding-left: 10px;
    border-width: 1px;
    border-color: #FF6347;
    width: 80%;
    height: 80px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;


  }

  .soutu-btn {
    background: linear-gradient(45deg, #FF6347, rgb(245, 73, 73));
    width: 20%;
    height: 80px;
    color: #ffffff;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }

  .list-cls {
    width: 100%;
    height: 70%;
    flex-direction: column;
  }

  .tuijian {
    padding-left: 10px;
    font-size: 30px;
    text-align: left;
    margin-top: 30px
  }

  .clstjnameone {
    font-size: 40px;
    color: rgb(252, 135, 115);
    margin-top: 20px;
    text-align: center;
    lines: 1;
    width: 100%;

  }

  .clstjnametwo {
    font-size: 40px;
    color: #FF6347;
    margin-top: 20px;
    text-align: center;

  }

  .caipu {
    font-size: 30px;
    text-align: left;
    padding-left: 10px;
  }


  .caipu-type-item {
    width: 100%;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 50px;
    align-items: center;
    align-content: center;
    columns: 2
  }

  .caipu-stack {

    width: 100%;
    height: 180px;
    flex-direction: column;
    align-items: center;
    align-content: center;

  }


  .caipu-type-one-name {

    font-size: 30px;
    margin-top: 100px;
    color: rgb(233, 81, 10);
  }

  .caipu-type-one-image {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;


  }
</style>

.caipu-type-item 是我需要row的布局
QQ截图20181112205911.png
回复

使用道具 举报

8

主题

76

帖子

420

积分

2018-11-13 10:41:55 显示全部楼层
你需要的是list-item这个组件可以横向排列还是list-item里面的元素可以横向排列呢?
list-item配置 flex-direction: row;的话,是可以把里面的元素变成横向排列的。
如果要list-item这个组件横向排列的话,要把 flex-direction: row;放到list的样式上,但是不建议这样。因为list组件有滚动效果,这样会变成横向滚动的。
注:我用的是官网的1020引起和调试器,0.0.37的打包工具。
回复

使用道具 举报

5

主题

11

帖子

80

积分

 楼主| 2018-11-13 22:10:32 显示全部楼层
vivo技术弟 发表于 2018-11-13 10:41
你需要的是list-item这个组件可以横向排列还是list-item里面的元素可以横向排列呢?
list-item配置 flex-di ...

现在问题又来了,现在已经横向了,但是里面元素不居中
  1. <list class="list-clslist">
  2.       <block for="caipuList">
  3.         <list-item class="caipu-type-item" type="articlescp">
  4.           <stack class="caipu-stack">
  5.             <image class="caipu-type-one-image" src="../Common/MainImage/{{$item.parentId}}.jpg"></image>
  6.             <text class="caipu-type-one-name">{{$item.name}}</text>
  7.           </stack>
  8.         </list-item>
  9.       </block>
  10.     </list>
复制代码

以上是我的代码
下面是我的样式
list-clslist

  1. .list-clslist {
  2.     width: 100%;
  3.     height: 50%;
  4.     flex-direction: row;
  5.     columns: 2;
  6.     align-items: center;
  7.     align-content: center;
  8.   }
复制代码

list-item 下面又有个stack
list-item 的样式为
  1. .caipu-type-item {
  2.     width: 100%;
  3.     height: 100%;
  4.     padding-left: 10px;
  5.     padding-right: 10px;
  6.     align-items: center;
  7.     align-content: center;
  8.   }
复制代码

stack 的样式为
  1. .caipu-stack {
  2.     width: 200px;
  3.     height: 180px;
  4.     align-items: center;
  5.     align-content: center;
  6.     padding-left: 10px;
  7.     padding-right: 10px;

  8.   }
复制代码

这里我想的是这个 stack 的height, width 想用百分比来表示 可是当我 width 设置100%始终没效果。我其实是想将for循环 stack 要么整体居中,要么就是填充完屏幕。

[img]C:\Users\陈渝金\Desktop\QQ截图20181113220438.png[/img]
回复

使用道具 举报

5

主题

11

帖子

80

积分

 楼主| 2018-11-13 22:10:53 显示全部楼层
本帖最后由 J.哥 于 2018-11-13 22:12 编辑
vivo技术弟 发表于 2018-11-13 10:41
你需要的是list-item这个组件可以横向排列还是list-item里面的元素可以横向排列呢?
list-item配置 flex-di ...

现在问题又来了,现在已经横向了,但是里面元素不居中
  1. <list class="list-clslist">
  2.       <block for="caipuList">
  3.         <list-item class="caipu-type-item" type="articlescp">
  4.           <stack class="caipu-stack">
  5.             <image class="caipu-type-one-image" src="../Common/MainImage/{{$item.parentId}}.jpg"></image>
  6.             <text class="caipu-type-one-name">{{$item.name}}</text>
  7.           </stack>
  8.         </list-item>
  9.       </block>
  10.     </list>
复制代码

以上是我的代码
下面是我的样式
list-clslist

  1. .list-clslist {
  2.     width: 100%;
  3.     height: 50%;
  4.     flex-direction: row;
  5.     columns: 2;
  6.     align-items: center;
  7.     align-content: center;
  8.   }
复制代码

list-item 下面又有个stack
list-item 的样式为
  1. .caipu-type-item {
  2.     width: 100%;
  3.     height: 100%;
  4.     padding-left: 10px;
  5.     padding-right: 10px;
  6.     align-items: center;
  7.     align-content: center;
  8.   }
复制代码

stack 的样式为
  1. .caipu-stack {
  2.     width: 200px;
  3.     height: 180px;
  4.     align-items: center;
  5.     align-content: center;
  6.     padding-left: 10px;
  7.     padding-right: 10px;

  8.   }
复制代码

这里我想的是这个 stack 的height, width 想用百分比来表示 可是当我 width 设置100%始终没效果。我其实是想将for循环 stack 要么整体居中,要么就是填充完屏幕。(要么row 3张图整体居中,要么row3张图填充屏幕width)

C:\Users\陈渝金\Desktop\QQ截图20181113220438.png

要么row 3张图整体居中,要么row3张图填充屏幕width

要么row 3张图整体居中,要么row3张图填充屏幕width
回复

使用道具 举报

8

主题

76

帖子

420

积分

2018-11-15 11:19:28 显示全部楼层
你看下manifest下面的 config designWidth这个字段多大,把list-item设置为这个大小px试试?
回复

使用道具 举报

5

主题

11

帖子

80

积分

 楼主| 2018-11-20 21:44:30 显示全部楼层
"config": {
    "logLevel": "debug"
  },

是这样的

点评

默认就是750px。https://doc.quickapp.cn/framework/manifest.html?h=750  详情 回复 发表于 2 小时前
回复

使用道具 举报

8

主题

76

帖子

420

积分

2 小时前 显示全部楼层
J.哥 发表于 2018-11-20 21:44
"config": {
    "logLevel": "debug"
  },

默认就是750px。https://doc.quickapp.cn/framework/manifest.html?h=750
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册