小程序中的scrool-view横向滚动,子项布局如何上对齐?

肉鸽 2017-09-24 08:07:45


如图所示,在scroll-view中的横向滚动设置中:
小狐狸默认在最下部与茄子对齐在一行了,如何设置才能让小狐狸在最上面一行与黄瓜对齐呢?

布局代码也贴一个上来:

<view>
<scroll-view scroll-x="true" style="display:flex;white-space: nowrap">
<view style="display:inline-block;background:yellow">
<view style="width:100px">黄瓜</view>
<view style="width:100px">茄子</view>
</view>
<view style="display:inline-block;background:red;background:red">
<view style="width:100px">小狐狸</view>
</view>
</scroll-view>
</view>
...全文
1187 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
cyyssly 2017-09-28
  • 打赏
  • 举报
回复
好好学习一下flex吧:align-items: flex-start
肉鸽 2017-09-24
  • 打赏
  • 举报
回复

<view>
<scroll-view scroll-x="true" style="display:flex;white-space: nowrap">
<view style="display:inline-block;background:yellow;height:80px">
<view style="width:9px">黄瓜</view>
<view style="width:90px">茄子</view>
</view>
<view style="display:inline-block;background:red;height:80px">
<view style="width:90px">小狐狸</view>
</view>
<view style="display:inline-block;background:blue;height:80px">
<view style="width:90px">晴天</view>
<view style="width:90px">雨天</view>
</view>
<view style="display:inline-block;background:green;height:80px">
<view style="width:90px">早上</view>
<view style="width:90px">中午</view>
<view style="width:90px">晚上</view>
</view>
</scroll-view>
</view>




再增加几行布局,把问题说清楚一些:
scroll-view横向布局时,子项目设置的调度都为80px,但是调度开始的位置却和子项目中包含的子view数量有关
包含子view数量最多的一个项目(3个),会从最上面开始显示:图中第4列
包含子view数量最少的一个项目(1个),会从最下面开始显示:图中第2列
再参看第1、3列,发现数据对齐方式是以最下一行对齐,捉了个急~~~

要实现数据都在最上面一行对齐该怎么弄呢?

3,143

社区成员

发帖
与我相关
我的任务
社区描述
微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,通过二次开发可以将公众账号由一个媒体型营销工具转化成提供服务的产品。
社区管理员
  • 微信开发
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧