精华内容
下载资源
问答
  • 微信小程序去掉scroll-view滚动条的方式 在微信小程序的项目开发中,时常有需要用到scroll-view的地方。 但是使用scroll-view就难免的会出现默认的滚动条,很影响页面的样式。 我在做项目的时候就遇到了这样的问题,...

    微信小程序去掉scroll-view滚动条的方式

    在微信小程序的项目开发中,时常有需要用到scroll-view的地方。
    但是使用scroll-view就难免的会出现默认的滚动条,很影响页面的样式。

    我在做项目的时候就遇到了这样的问题,然后去网上搜索,结果搜索出来很多都是说通过添加下方CSS来达到的。

    ::-webkit-scrollbar { 
    	width: 0; 
    	height: 0; 
    	color: transparent; 
    }
    

    但问题就是这样设置,小程序中的scroll-view依然还存在着滚动条。
    之后我也在网上搜索了很多方法,也是没有找到太合适有效的方案。
    于是我就想到了下面的这个方法。

    因为scroll-view的滚动条是在scroll-view的最右侧(纵向时),那是不是可以说如果我的scroll-view的宽度超出了终端上的宽度,就可以把scroll-view的滚动条给遮挡在了视线之外。
    于是就有了下列Demo

    wxml
    <scroll-view
    	class="scroll-view absolute center"
        scroll-y>
        <view class="list-box">
    		<block wx:for="{{list}}" wx:for-item="item">
    			<view class="list-item">{{item.num}}</view>
    		</block>
    	</view>
    </scroll-view>
    
    wxss
    .absolute {
      position: absolute;
    }
    .center {
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
    }
    .scroll-view {
    	width: 800rpx;  // 根据所需宽度进行调整。切记一定要比显示宽度大。
    	height: 100%;
    }
    .list-box {
    	width: 700rpx;	// 这里的宽度是你所要展示的宽度,按照实际需求来填写。
    	height:100%;
    	margin: 0 auto;	// 居中显示
    }
    .list-item {
    	width: 100%;
    	height: 200rpx;
    	border: 1px solid red;
    	margin-top: 50px;
    	line-height: 200rpx;
    	text-align: center;
    	font-size: 50rpx;
    }
    .list-item:last-child {
    	margin-bottom: 50px;
    }
    
    js
    Page({
    	data: {
    		list: [
    			{
    				num: 1
    			},
    			{
    				num: 2
    			},
    			{
    				num: 3
    			},
    			{
    				num: 4
    			},
    			{
    				num: 5
    			},
    		]
    	}
    })
    

    这样就可以实现微信小程序中的scroll-view的隐藏滚动条了。

    展开全文
  • 一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js...
  • 主要介绍了微信小程序scroll-view隐藏滚动条的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序scroll-view隐藏滚动条方法

    万次阅读 热门讨论 2018-01-19 17:52:42
    在wxss里加入以下代码:::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}

    在wxss里加入以下代码:

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }

    展开全文
  • scroll-view 隐藏滚动条

    2019-08-06 13:40:52
    scroll-view 隐藏滚动条 在标签上加以下属性即可。 android:scrollbars="none

    scroll-view 隐藏滚动条
    在标签上加以下属性即可。

       android:scrollbars="none"
    
    展开全文
  • 一:scroll-view隐藏滚动条   在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: (此图片来源于网络,如有侵权,...
  • uniapp scroll-view 隐藏滚动条的问题 /* 解决滚动条的问题 */ ::-webkit-scrollbar{ display: none; } /* 解决H5 的问题 */ uni-scroll-view .uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条,仍然可以滚动...

    uniapp scroll-view 隐藏滚动条的问题

    /* 解决滚动条的问题 */
    ::-webkit-scrollbar{
        display: none;
    }
    /* 解决H5 的问题 */
    uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    	/* 隐藏滚动条,仍然可以滚动 */
    	display: none
    }
    
    展开全文
  • 隐藏scroll-view滚动条

    2021-03-02 09:44:32
    ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
  • 本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
  • scroll-view隐藏滚动条

    2021-07-19 17:45:52
    view.html,把scroll-view组件的enhanced设为true,show-scrollbar设为false,调试基础库为2.18.0,但是在开发工具和安卓实机上都无法隐藏滚动条。 ...
  • uni-scroll-view隐藏滚动条

    千次阅读 2019-07-10 20:44:13
    uniapp中 ,uni-scroll-view隐藏滚动条的方法 /deep/.uni-scroll-view { background-color: #fff; } /deep/.uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条,但依旧具备可以滚动的功能 */ ...
  • // 隐藏滚动条 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
  • ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } 在有scroll-view滚动条页面的wxss里,不用选择器直接添加,但不能在app.wxss直接添加。 ...
  • uniapp scroll-view 隐藏滚动条的问题

    千次阅读 2020-07-08 12:07:47
    我用scroll-view的时候:用手机模拟器和小程序查看的时候并没有出现滚动条,真机运行的时候出现滚动条,用h5直接看的时候出现滚动条,我发现的解决办法有两种: 1.在app.vue的style里面外部链接base.css 这种办法...
  • uniapp中使用scroll-view 隐藏滚动条 ::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; }
  • /* 隐藏滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } 如果scroll-view高度为整个页面高度是不行的, 解决技巧,给scroll-view高度为整个页面高度时候减去1...
  • /* 隐藏滚动条,但依旧具备可以滚动的功能 */ display: none; width: 0; height: 0; color: transparent; background: transparent; } /deep/::-webkit-scrollbar { display: none; width: 0; ...
  • 微信小程序 scroll-view滚动条隐藏

    千次阅读 2019-02-26 11:19:01
    没有一个属性是去控制显示/隐藏滚动条。 既然是组件,那就是css来控制的。又去看一下css中的scroll的介绍,有大概如下的属性参考链接 :-webkit-scrollbar 滚动条整体部分。 :-webkit-scrollbar-button 滚动条...
  • 微信小程序 -- 去掉scroll-view滚动条(测试有效)

    千次阅读 热门讨论 2019-08-02 09:56:05
    去掉scroll-view滚动条其实很简单,只需要添加以下样式: scroll-view ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } 但是需要注意的是,如果只是如下写法,可能只能...
  • scroll-view滚动视图scroll-view作用滚动条效果如何隐藏滚动条以下是解决方法的技术说明 scroll-view作用 可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,497
精华内容 4,598
关键字:

scrollview去掉滚动条