<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>
DCloud_UNI_yuhe
我尝试运行了你这段代码,我看能运行的,你页面上还有其它内容吗?或者还有什么配置项吗?
2025-07-21 17:22
k***@sina.com
回复 DCloud_UNI_yuhe: 还是不行,我把页面里东西全注释了,只剩上面这一块,也还是无法滚动
2025-07-24 11:47
k***@sina.com
回复 DCloud_UNI_yuhe: 在pc上是可以的,但是在安卓设备上用鼠标无法拖动
2025-07-24 11:47
DCloud_UNI_yuhe
回复 k***@sina.com: 不用鼠标用手触摸能够拖动吗?
2025-07-24 11:53
k***@sina.com
回复 DCloud_UNI_yuhe: 我是制作一体机软件的,板子是安卓的板子,但是接的普通显示器,因为目前触摸屏还没到货
2025-07-24 11:57
k***@sina.com
回复 DCloud_UNI_yuhe: 就是说使用安卓主板接在普通显示器上进行开发,同时用鼠标点的话scroll-x就无效
2025-07-24 12:01