uniapp横向滚动，测试有效

uniapp 横向滚动，微信小程序显示效果

显示效果

uniapp 横向滚动效果

代码

html

<template>
<view>
    <view style="padding-top:100rpx;">横向滚动</view>
    <scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower" lower-threshold="50" enable-flex>
        <view class="scrollView_item">1</view>
        <view class="scrollView_item">2</view>
        <view class="scrollView_item">3</view>
        <view class="scrollView_item">4</view>
        <view class="scrollView_item">5</view>
    </scroll-view>

</view>
</template>

JS

<script>
export default {
    data() {
        return {
            scrollLeft: 0,
            old: {
                scrollLeft: 0
            }
        }
    },
    methods: {
        scroll: function (e) {
            console.log(e)
            this.old.scrollLeft = e.detail.scrollLeft
        },
        upper: function (e) {
            console.log(e)
        },
        lower: function (e) {
            console.log(e)
        },
    },
}
</script>

scss

<style lang="scss" scoped>
.scrollView {
    $w:400rpx;
    $h:240rpx;
    overflow: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    display: flex;
    height: $h;
    margin-bottom: 400rpx;
    margin-top: 400rpx;

    &_item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 $w;

        height: $h;
        border: 1px solid #f00;
        font-size: 40rpx;
        text-align: center;
        color: #f00;
    }
}
</style>