小程序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中表单的使用小结
Jan 11 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
vue视图不更新情况详解
May 16 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
vue.config.js常用配置详解
Nov 14 Javascript
小程序中手机号识别的示例
Dec 14 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php调用C代码的实现方法
2014/03/11 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
Django+Vue跨域环境配置详解
2018/07/06 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python获取文件扩展名的方法
2015/07/06 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python利用线程实现多任务
2020/09/18 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
银行员工职业规划范文
2014/01/21 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
贷款收入证明范本
2015/06/12 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis