【uniapp】uniapp中使用scroll-view时，可以滚动，但是不显示滚动条

小黄呀呀呀

已于 2022-04-18 16:48:16 修改

阅读量6.8k

点赞数 3

文章标签：前端

于 2022-04-18 16:17:10 首次发布

原文链接：https://blog.youkuaiyun.com/LJJONESEED/article/details/123986312

版权

本文介绍了在uniapp中使用scroll-view组件时如何解决滚动条不显示的问题，并提供了示例代码，包括纵向和横向滚动的实现。同时，展示了在左右两个scroll-view并存时，确保滚动不影响另一边的布局。文章还包含了滚动事件的监听和处理，如scrolltoupper和scrolltolower事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

uniapp中使用scroll-view时，可以滚动，但是不显示滚动条，参考博主强制修改
https://blog.youkuaiyun.com/LJJONESEED/article/details/123986312

  <template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<view>
				<scroll-view style="height: 100rpx;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>
			<view class="uni-title uni-common-mt">
				Horizontal Scroll
				<text>\n横向滚动</text>
			</view>
			<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>
		</view>
	</view>
</template>
<script>
export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        upper: function(e) {
            console.log(e)
        },
        lower: function(e) {
            console.log(e)
        },
        scroll: function(e) {
            console.log(e)
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(() => {
                this.scrollTop = 0
            });
            uni.showToast({
                icon:"none",
                title:"纵向滚动 scrollTop 值已被修改为 0"
            })
        }
    }
}
</script>

<style lang="scss">
 .page-section-spacing{
   margin-top: 60rpx;
 }
 .scroll-view_H{
   white-space: nowrap;
 }
 .scroll-view-item{
   height: 300rpx;
 }
 .scroll-view-item_H{
   display: inline-block;
   width: 100%;
   height: 300rpx;
 }
 /deep/ ::-webkit-scrollbar {
	 //滚动条整体样式
	    display: block;
	    width: 10px !important;
	    height: 10px !important;
	    -webkit-appearance: auto!important;
	    background: red;
	    overflow: auto!important;
 }
 /deep/ ::-webkit-scrollbar-thumb {
	 //滚动条里面小方块
 	   border-radius: 10px !important;
	   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
	   background-color: #535353 !important;
 }
 /deep/ ::-webkit-scrollbar-track {
 	   //滚动条
 	   border-radius: 10px !important;
 	   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
 	   background-color: #ededed !important;
 }
</style>

一定要写高度

实例：

实现左边滚动，右边滚动，但是右边滚动不会让左边跑偏

<!--
 * @Author: your name
 * @Date: 2022-04-18 10:58:07
 * @LastEditTime: 2022-04-18 11:53:05
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \uniapp-shop\pages\goods-pic\goods-pic.vue
-->
<template>
	<view class="pics">
		<view class="left">
			<scroll-view  class="s" scroll-y show-scrollbar>
				<view  v-for="(item,index) in listArr" :key="item.cat_id" :class="currentIndex==index?'active':''" @click="changeIndex(index)">
					{{item.cat_name}}
				</view>
 			</scroll-view>
			
		</view>
		  <view class="right">
			<scroll-view  scroll-y class="s2" show-scrollbar="false">
				<view  v-for="(item) in listArr_list" :key="item.cat_id">
					<view class="title">{{item.cat_name}}</view>
					<view  v-for="(item2) in item.children" :key="item2.cat_id">
						{{item2.cat_name}}
					</view>
					<view  v-for="(item3,index3) in lunBoArr" :key="index3">
						<image :src="item3.image_src" @click="preViewimage(item3)"></image>
					</view>
				</view>
			</scroll-view>
		</view>  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr:[],
				currentIndex:0,
				listArr_list:[],
				lunBoArr:[]
			}
		},
		methods: {
			async getLun(){
				const result=await this.$myRequest({
					url:'/api/public/v1/home/swiperdata'
				})
				this.lunBoArr=result.data.message
				console.log(this.lunBoArr)
			},
			async getData(){
				const result=await this.$myRequest({
					url:'/api/public/v1/categories'
				})
				console.log(result)
				this.listArr=result.data.message
				this.listArr_list=this.listArr[0].children
			},
			changeIndex(index){
				this.currentIndex=index
				this.listArr_list=this.listArr[index].children
			},
			preViewimage(item2){
				let urls=this.lunBoArr.map((item,index)=>{
					return item.image_src
				})
				uni.previewImage({
					urls: urls,
					current:item2.image_src
				})
			}
		},
		onLoad(){
			this.getData()
			this.getLun()
		}
	}
</script>

<style lang="scss">
.pics{
	display: flex;
	width: 100%;
	height: 1000rpx;
	.left{
 		width: 30%;
		height: 1000rpx;
		.s{
			height: 2200rpx;
			view{
				margin-bottom: 30rpx;
				text-align: center;
				font-size: 40rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1px solid #eee;
				border-right: 1px solid #eee;
			}
		}
  		
	}
	.right{
		width: 70%;
		height: 100%;
 		padding-left: 50rpx;
		.s2{
			height: 3000rpx;
			.title{
				font-size: 50rpx;
				margin-top: 50rpx;
			}
			image{
				width: 100%;
				height: 200rpx;
			}	
		}
		
	}
	.active{
		background-color: $shop-color;
	}
	
}
</style>