微信小程序-横向滑动scroll-view隐藏滚动条

文章转载自：https://blog.csdn.net/qq_24734285/article/details/53912799

wxml

<scroll-view class="recommend_scroll_x_box" scroll-x="true">
    <view class="recommend_hot_box" wx:for="{{hotList}}">
        <image src="{{item.pic}}" class="recommend_hot_image"></image>
    </view>
</scroll-view>

wxss

.recommend_scroll_x_box {
    height: 245rpx;
    white-space: nowrap;
    display: flex;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.recommend_hot_box {
    width: 230rpx;
    height: 245rpx;
    margin-right: 24rpx;
    display: inline-block;
}

.recommend_hot_image {
    width: 230rpx;
    height: 143rpx;
}

js

Page({
    data: {
        hotList: [
        {
            pic: '/images/example2.png',
            title: '玻璃棧道',
            desc: '22W人去過'
        }, {
            pic: '/images/example2.png',
            title: '玻璃棧道',
            desc: '22W人去過'
        }, {
            pic: '/images/example2.png',
            title: '玻璃棧道',
            desc: '22W人去過'
        }, {
            pic: '/images/example2.png',
            title: '玻璃棧道',
            desc: '22W人去過'
        }, {
            pic: '/images/example2.png',
            title: '玻璃棧道',
            desc: '22W人去過'
        }]
    }
})

最后，根据网友“夸克逃逸”的提醒，强调一下最主要的代码是wxss里的这行：

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}