uni-app实现横向滚动

借鉴博客：

https://blog.csdn.net/qq_36436407/article/details/115002550

 

成功后效果：

 

 

 

实现代码：

<template>
    <view>
        <view class="prefer-title">
            为你优选
        </view>
        <view>
            <scroll-view class="prefer-scroll" scroll-x="true" @scroll="scroll">
                <block v-for="item in 5" :key="item">
                    <view class="image-box">
                        <view >A</view>
                    </view>
                </block>
                
            </scroll-view>
        </view>
            
            
            
            
            
            
            
            
    </view>
    
</template>

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

<style>
    .prefer-title{
        margin: 30upx 0;
    }
    .prefer-scroll{
        white-space: nowrap;
        width: 100%;
        height: 300upx;
        
    }
    .image-box{
        display: inline-block;
        width: 300upx;
        height: 280upx;
        border: 1upx solid green;
    }
    
</style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。