小程序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 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 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
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vue.js数据绑定操作详解
2018/04/23 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python 爬虫请求模块requests详解
2020/12/04 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
经理任命书模板
2014/06/06 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
2016年寒假生活小结
2015/10/10 职场文书
安全学习心得体会范文
2016/01/18 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
python中的getter与setter你了解吗
2022/03/24 Python