网虫
网虫
  • 发布:2021-07-21 12:36
  • 更新:2021-08-27 00:16
  • 阅读:1311

【报Bug】scroll-view, scroll-x , pc版,无法横向滚动,或者拖动

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: w10

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

浏览器平台: Chrome

浏览器版本: 最新

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://hm.lyy1688.com/dt

示例代码:

'''<template>
<view>
<view class="ha">
<view class="fr padding margin-right text-white">管理员:{{user.user_name}}</view>
</view>
<view class="co" >
<view class="dt">
<view class="mp">
</view>
/横向滚动 开始/
<scroll-view scroll-x="true" class="bg-white gd" @scroll="gscroll" :scroll-left="gscTop">
<view v-for="(g,l) in gds" :key="l" class="relative margin gds" @tap="$show(g.id,'gd')" ><block>
<image :src="g.goods_imgs+'x200.jpg'" style="width:200upx;height: 200upx;"></image>
<view class="bg-white" style="height:40upx;">{{g.goods_name}}</view>
<view class="text-price" style="left:auto;right:0upx;bottom:40rpx;font-size:32rpx;padding: 1upx 12upx;color:#f00;position: absolute;background: rgba(255,255,255,0.65);border-radius:10upx;" >{{g.price}}</view>
</block>
</view>
</scroll-view>
/横向滚动 结束/
</view>
<view class="oi">
<scroll-view scroll-y scroll-with-animation style="width:100%;height: 100%;" scroll-left="10">

            </scroll-view>    
        </view>   
    </view>  
</view>  

</template>
<script>
export default {
data() {
return {

                spid:5,  
                user:uni.getStorageSync('user'),  
                upu:this.$upu,  
                CustomBar: this.CustomBar,  
                upu:this.$upu,  
                curl:'hm',                    
                lg:uni.getStorageSync('longitude')||103.84,  
                lt:uni.getStorageSync('latitude')||30.708513,  
                lgo:uni.getStorageSync('longitude')||103.84,  
                lto:uni.getStorageSync('latitude')||30.708513,                
                marker:[],  
                gds:[],  
                gy:[],  
                os:this.$os,                  
                fw:[],  
                sg:[],  
                nm:'',  
                xgd:1,  
                p:1,  
                jp:0,  
                ss:'',            
                tp:'gy',  
                imgshow:false,  
                pos:false,  
                hackReset:true,  
                gg_mj:'',  
                gg_dj:'',  
                gg_xj:'',  
                gg_gd:'',  
                gg_gf:'',  
                gg_bx:'',  
                price:'',  
                goods_number:'',  
                gg_fzs:'',  
                gg_fzc:'',  
                gg_fzf:'',  
                xgg:false,  
                pli:10,                   
                mdtop:'100',  
                gnms:[],  
                lis:[],  
                p:1,  

                gscTop:0  

        }  
    },  
    onLoad() {  
        this.lism()  
        this.getli()  
    },  
    methods: {  
        getli:function(){                 
            var that=this  
            uni.request({  
              url: that.$URL+'/bj/bjog',  
              data: {  
                uid: that.user.user_id||5,  
                tm:this.tm,  
                tp:this.tp,  
                nm:this.nm||'',       
                p:that.p  
              },  
              success: function (res) {  
                   console.log(res.data);  
                if(that.p>1){  
                    if(res.data[0])that.lis = that.lis.concat(res.data)  
                }else{  
                    if(res.data[0])that.lis=res.data  
                    for(var i=0;i<20;i++){  
                        that.tt +=that.lis[i].goods_name+',';  
                    }  
                    uni.setStorageSync('qgs',that.tt)  
                }     
              }  
            });   
        },            
        gocur:function(url){  
            this.curl=url  
        },  
        gscroll: function(e) {  
             this.gscTop = e.detail.scrollTop  
             console.log(8)  
         },  
    }  
}  

</script>
<style>
.ha{height:160upx;width: 100%;background-color: #222222;}
.co{height: calc(100vh - 80px) ;width: 100%;}
.dt{width:calc(100vw - 250px);height: 100%;float:left;}
.oi{width:500upx;height: 100%;float:left;}
.mp{width: 100%;height:calc(100vh - 240px);}
/横向滚动 开始/
.gd{width: 100%;height:300upx;white-space: nowrap;overflow: hidden;}
.gds{width: 200upx;display: inline-block;overflow: hidden;}
/横向滚动 结束/
</style>
'''

操作步骤:

内置浏览器,生成H5,布置服务器后,在任意浏览器。无法横向滚动

预期结果:

可以横向滚动,或者拖动

实际结果:

无法横向滚动,或者拖动

bug描述:

scroll-view, scroll-x , pc版,浏览器中,无法横向滚动或者拖动。
转成手机版可以正常使用,转成PC版竖向可以用,横向不行。

2021-07-21 12:36 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

浏览器暂不支持。scroll-view用的是浏览器原生的滚动。

如果想要在PC端拖动滚动,可以使用模拟滚动的库来实现。

1***@qq.com

1***@qq.com

better-scroll

该问题目前已经被锁定, 无法添加新回复