滑动问题

uni的官方网站

scroll-view

scroll-view 可滚动视图区域。用于区域滚动。

官方部分属性

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许总线向滚动
enable-flex	Boolean	false	启用 flexbox 布局
@scroll	EventHandle		滚动时触发

我利用了enable-flex="ture"来开起flexbox布局，失败了，就利用了其他方法

   <scroll-view scroll-x="true" class="scroll-view" @scroll="scroll_x">
	<view class="scroll_y">
            <view class="data1" v-for="(item,index) in 4">
            <view class="border"></view>			
            </view>
	</view>
   </scroll-view>

放点大图片看效果，代码如下

.scroll-view{ //这个是外侧滑动的窗口
			
        width: 100%;
        position: absolute;
        top: 15%;
        left: 50%;
        right: 10%;
        transform: translate(-50%);
			
    .scroll_y{ //这个是里面数据的布局

        display: flex;	
        .data1{
            position:relative;
                .border{
                        width: 20rem;
                        height: 12rem;
                        background-color: red; //为了看的清楚
                        margin: 2rem; //为了看的清楚
                }
        }
    }
}
		

使用的method事件

methods:{
        scroll_x(e){
                console.log(e.detail.scrollLeft)
        }
}

图片: