1***@qq.com
1***@qq.com
  • 发布:2024-08-06 11:33
  • 更新:2024-08-06 11:46
  • 阅读:394

scroll-view 在vue3下横向滚动失效

分类:uni-app

在基于hbuilder X 4.24创建的vue3项目中使用scroll-view组件横向滚动无作用,使用第三方的UI组件的横向滚动,也无法滚动,自己手写的代码,也无法实现横向滚动(手写的代码在普通的html文件中能实现,通用的代码),

2024-08-06 11:33 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

hbx 4.24 vue3 可以横向滚动

<template>  
    <view>  
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">  
            <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>  
            <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>  
            <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>  
        </scroll-view>  
    </view>  
</template>  
<script setup>  
</script>  
<style>  
    .scroll-view_H {  
        white-space: nowrap;  
        width: 100%;  
    }  

    .scroll-view-item_H {  
        display: inline-block;  
        width: 100%;  
        height: 300rpx;  
        line-height: 300rpx;  
        text-align: center;  
        font-size: 36rpx;  
    }  
    .uni-bg-red {  
        background-color:red;  
    }  
    .uni-bg-green {  
        background-color: green;  
    }  
    .uni-bg-blue {  
        background-color: blue;  
    }  
</style>
  • 1***@qq.com (作者)

    h5模式下能行嘛,我的不行,我之前直接复制的这个,不行

    2024-08-06 12:29

  • 爱豆豆

    回复 1***@qq.com: 就是h5端的

    2024-08-06 13:42

  • 爱豆豆

    会不会是浏览器的问题?你直接打开官方示例看看 能不能滚动https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view

    2024-08-06 13:43

要回复问题请先登录注册