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

互动交流 list 如何横向布局

9
回复
2012
查看
  [复制链接]

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 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; 没有效果
QQ截图20181111223252.png
回复

使用道具 举报

11

主题

87

帖子

795

积分

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 如何横向布局”的帖子 还是不行。 我的页面是这样的 .caipu-type-item 是我需要row的布局
QQ截图20181112205911.png
回复

使用道具 举报

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
回复

使用道具 举报

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  详情 回复 发表于 2018-12-17 10:46
回复

使用道具 举报

2018-12-17 10:46:44 显示全部楼层
J.哥 发表于 2018-11-20 21:44 "config": { "logLevel": "debug" },
默认就是750px。https://doc.quickapp.cn/framework/manifest.html?h=750
回复

使用道具 举报

5

主题

10

帖子

75

积分

2019-1-3 16:13:02 显示全部楼层
想要list中存在多列的布局,可以使用list的columns样式呀。columns:需要的列数;
回复

使用道具 举报

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