list 如何横向布局

J.哥

list 如何横向布局？ A B C C E F G H I 像这样3*3 的布局 我的 主界面 有个div class="demo-page"> for="caipuList"> class="caipu-type-item"> class="caipu-type-one-one"> class="caipu-type-one-image" src="../Common/MainImage/{{$item.parentId}}.jpg"> class="caipu-type-one-name">{{$item.name}} .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; 没有效果

dadong

1. <div class="demo-page">

复制代码

改为

1. <list class="demo-page">

复制代码

试试

J.哥

dadong聊天中……[离线]关闭 查看与dadong的聊天记录访问dadong的空间 J.哥: 关于您在“list 如何横向布局”的帖子 还是不行。 我的页面是这样的 .caipu-type-item 是我需要row的布局

vivo官方技术团队

你需要的是list-item这个组件可以横向排列还是list-item里面的元素可以横向排列呢？ list-item配置 flex-direction: row;的话，是可以把里面的元素变成横向排列的。 如果要list-item这个组件横向排列的话，要把 flex-direction: row;放到list的样式上，但是不建议这样。因为list组件有滚动效果，这样会变成横向滚动的。 注：我用的是官网的1020引起和调试器，0.0.37的打包工具。

J.哥

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;
9. }

复制代码

这里我想的是这个 stack 的height， width 想用百分比来表示 可是当我 width 设置100%始终没效果。我其实是想将for循环 stack 要么整体居中，要么就是填充完屏幕。 [img]C:\Users\陈渝金\Desktop\QQ截图20181113220438.png[/img]

J.哥

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;
9. }

复制代码

这里我想的是这个 stack 的height， width 想用百分比来表示 可是当我 width 设置100%始终没效果。我其实是想将for循环 stack 要么整体居中，要么就是填充完屏幕。（要么row 3张图整体居中，要么row3张图填充屏幕width） C:\Users\陈渝金\Desktop\QQ截图20181113220438.png

vivo官方技术团队

你看下manifest下面的 config designWidth这个字段多大，把list-item设置为这个大小px试试？

J.哥

"config": { "logLevel": "debug" }, 是这样的

vivo官方技术团队

J.哥 发表于 2018-11-20 21:44 "config": { "logLevel": "debug" },

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

小白or小黑

想要list中存在多列的布局，可以使用list的columns样式呀。columns：需要的列数；