小程序scroll-view安卓机隐藏横向滚动条的实现详解


Posted in Javascript onMay 16, 2019

一、实践踩坑

项目使用mpvue开发

1.使用flex布局

// html大概长这样

<div class="worth-wraper">
 <scroll-view scroll-x="true" scroll-left="0">
 <div class="worth-list">
 <div class="worth-item-img">
 <img src="/static/images/index/brand1.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="/static/images/index/brand2.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="/static/images/index/brand3.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="/static/images/index/brand4.png" alt="">
 </div>
 </div>
 </scroll-view>
</div>
// css相应就大概长这样
.worth-wraper{

margin-top: 60rpx;
height: 560rpx;
box-sizing: border-box;
display: flex;
width: 750rpx;
overflow: hidden;
font-size: 28rpx;
color: #7a7269;
line-height: 42rpx;
.worth-list{
 display: flex;
 margin-left: 30rpx;
 .worth-item-img{
   flex: 1;
   margin-right: 20rpx;
   width: 290rpx;
   height: 560rpx;
 }
 img{
  width: 290rpx;
  height: 560rpx;
 }
 .worth-item{
  padding: 0 35rpx 0 40rpx;
  flex: 1;
  box-sizing: border-box;
  background: url("../../../static/images/index/worth-bg1.png") no-repeat;
  background-size: 100% 100%;
  width: 290rpx;
  height: 560rpx;
  margin-right: 20rpx;
 }
}
}

ios没有问题,样式正常,然后到了安卓机上,却出现了横向滚动条.......然后各种找如何去除横向滚动条的方法....

二、隐藏滚动条

在网上搜了很多,都是说加上这段代码就可以:

/隐藏滚动条/

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;
}

或者有的人说这样子:

/隐藏滚动条/

::-webkit-scrollbar{

display: none;
}

然而两种方法我都试过,然而在安卓机上并没什么鸟用。

后来看到有人这么说:

1.scroll-view 中的需要滑动的元素不可以用 float 浮动;

2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;

4.包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;

好像能行得通....不用flex,不用float

然后改写css代码

.worth-wraper{

 margin-top: 60rpx;
 width: 750rpx;
 height: 560rpx;
 overflow: hidden; 
 scroll-view{
  width: 100%;
  white-space: nowrap;
 }
 .worth-list{
  display: inline-block;
  margin-left: 30rpx;
  padding-bottom: 60rpx; //加个padding值,这样高度大于scroll-view外面包裹的元素
  .worth-item-img{
   margin-right: 20rpx;
   width: 290rpx;
   height: 560rpx;
   display: inline-block;
  }
 }
}

到这里,scroll-view安卓机上横向滚动条消失了,大概长这样:

小程序scroll-view安卓机隐藏横向滚动条的实现详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
详解angular应用容器化部署
Aug 14 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
vue实现百度搜索功能
Dec 28 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
微信小程序云开发之云函数详解
May 16 #Javascript
微信小程序云开发之模拟后台增删改查
May 16 #Javascript
微信小程序云开发之新手环境配置
May 16 #Javascript
vue项目中使用scss的方法步骤
May 16 #Javascript
微信小程序云开发使用方法新手初体验
May 16 #Javascript
angular多语言配置详解
May 16 #Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
两种php实现图片上传的方法
2016/01/22 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
心扬JS分页函数代码
2010/09/10 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python中字符串的处理技巧分享
2016/09/17 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
Python字典遍历操作实例小结
2019/03/05 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
会计主管岗位职责
2014/01/03 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
毕业生政审意见范文
2015/06/04 职场文书
2016年公司新年寄语
2015/08/17 职场文书
新员工入职感言范文!
2019/07/04 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL