<template>
<view class="x">
<scroll-view class="scroll-view_H" scroll-x="true" direction="horizontal" @scroll="handleScroll">
<view id="demo1" class="scroll-view-item_H v1">A</view>
<view id="demo2" class="scroll-view-item_H v2">B</view>
<view id="demo3" class="scroll-view-item_H v3">C</view>
</scroll-view>
</view>
</template>
<script>
export default {
methods: {
handleScroll(e) {
console.log(e);
}
}
}
</script>
<style lang="scss" scoped>
.x {
width: 100%;
height: auto;
}
.scroll-view_H {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: 350px;
box-sizing: border-box;
background-color: green;
white-space: nowrap;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 36px;
}
.v1 {
background-color: pink;
}
.v2 {
background-color: red;
}
.v3 {
background-color: green;
} </style>
0 个回复