scroll-view

小程序的scroll-view 处理横向滚动遇到的问题

html页面

注意：scroll-view 不用设置宽度；auto 就OK

class='scroll-product'>
        class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
            for="{{fastList}}" wx:key>
                class="none" class='item' url=''>
                    class='pro-info line1'>{{item.name}}
                
            
        
    

css

注意：scroll-view 的外层元素一定要设置不要换行

.orderPage_container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.scroll-product {
    white-space: nowrap;
    margin-top: 38rpx;
    padding: 0 30rpx 37rpx 30rpx;
}

.item {
    width: 180rpx;
    display: inline-block;
    margin-right: 19rpx;
    border-bottom: 4rpx solid #47b479;
    box-shadow: 0 40rpx 30rpx -10rpx #eee;
}

.pro-info {
    font-size: 20px;
    color: #333;
}

js

data: {
        fastList: [
            {
                name: 'ds1'
            },
            {
                name: 'ds2'
            },
            {
                name: 'ds3'
            },
            {
                name: 'ds4'
            },
            {
                name: 'ds5'
            }
        ]
    },