The slide problem

Uni’s official website

scroll-view

Scroll-view Indicates the area of the scrollable view. Used for zone scrolling.

Official partial attributes

The property name type The default value instructions
scroll-x Boolean false Allow horizontal scrolling
scroll-y Boolean false Allows the bus to scroll forward
enable-flex Boolean false Enable flexbox layout
@scroll EventHandle Scrolling trigger

I used enable-flex=”ture” to open the Flexbox layout, and when that failed, I used another method

   <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>
Copy the code

Put a big image to see the effect. The code is as follows

.scroll-view{ // This is the sliding window on the outside
			
        width: 100%;
        position: absolute;
        top: 15%;
        left: 50%;
        right: 10%;
        transform: translate(-50%);
			
    .scroll_y{ // This is the layout of the data inside

        display: flex;	
        .data1{
            position:relative;
                .border{
                        width: 20rem;
                        height: 12rem;
                        background-color: red; // To see clearly
                        margin: 2rem; // To see clearly}}}}Copy the code

Method event used

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

Image: