小程序scroll-view横向滚动

最新推荐文章于 2020-07-13 09:44:35 发布

转载最新推荐文章于 2020-07-13 09:44:35 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/studyh5/p/9826197.html

本文介绍了一种使用WXML实现水平滚动视图的方法，通过设置scroll-x属性及white-space:nowrap，使子元素display:inline-block，适用于微信小程序等环境下的页面布局优化。

wxml

<scroll-view scroll-x="true" style="background:black;height:110px; white-space: nowrap;">
<view style="background: red; width: 200px; height: 100px; display: inline-block;"></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block;"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block;"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block;"></view>
</scroll-view>

注释：父级加white-space:nowrap 子元素加display:inline-block

转载于:https://www.cnblogs.com/studyh5/p/9826197.html