正文

微信小程序横向滚动正确姿势

IP云
IP云V管理员/3 阅读
09/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<1>xml文件

<view>
<scroll-view scroll-x class="scroll-header">
<view class="wrap1" wx:for="{{lists}}">
<text class="textLine2">{{item.name}}</text>
</view>
</scroll-view>
</view>

<2>wxss文件

.scroll-header {
display: flex;
white-space: nowrap;
}.scroll-header view {
height: 50rpx;
width: 200rpx;
display: inline-block;
}

有两点需要注意：下面两个必须要加上。

（1）white-space: nowrap;   表示规定段落中的文本不进行换行：

（2）display: inline-block; 主要的用处是用来处理行内非替换元素的高宽问题的