我这个是同向滚动的 你可以参考一下
<template>
<scroll-view class="content" :scroll-y="scrollY" >
<block v-for="num in 20">
<div class="text_box">
<text class="title">{{num}}</text>
<scroller class="scroller" @touchstart="scrollY = false" @touchcancel="scrollY = true" @touchend="scrollY = true">
<div class="row" v-for="(item,index) in 10" :key="index">
<text class="text">{{item}}</text>
</div>
</scroller>
</div>
</block>
</scroll-view>
</template>
<script>
export default {
data() {
return {
scrollY:true
}
}
}
</script>
<style>
.content {
flex: 1;
background-color: #007AFF;
}
.logo {
height: 100rpx;
width: 100rpx;
margin-top: 100rpx;
margin-bottom: 50rpx;
}
.title {
margin-top: 80rpx;
margin-left: 50rpx;
font-size: 46rpx;
color: #8f8f94;
}
.text_box {
flex-direction: row;
justify-content: space-between;
height: 200rpx;
background-color: #00BFFF;
margin-bottom: 20rpx;
}
.scroller {
background-color: pink;
width: 100rpx;
height: 100rpx;
margin-right: 50rpx;
margin-top: 50rpx;
}
.row {
height: 80rpx;
}
.text {
font-size: 30rpx;
background-color: #4CD964;
}
</style>
2 个回复
爱豆豆 - 办法总比困难多
使用scroll-view 然后通过动态的:scroll-y或者:scroll-x控制
爱豆豆 - 办法总比困难多
我这个是同向滚动的 你可以参考一下
哈哈6 (作者)
我的数据列表不在scroll-view 里面而且页面里有很多元素，需要改成整个页面包裹在scroll-view里面吗
2023-07-07 10:27
哈哈6 (作者)
我试了下整个页面包裹在scroll-view 里依然阻止不了滚动
2023-07-07 10:32
爱豆豆
回复 哈哈6: 你是app端吗？
2023-07-07 11:14
哈哈6 (作者)
回复 爱豆豆: 是，app 小程序都有
2023-07-07 13:52
爱豆豆
回复 哈哈6: 能提供个demo吗？我来测试下
2023-07-07 14:04