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

<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; 主要的用处是用来处理行内非替换元素的高宽问题的