小程序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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 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 checkbox 取值详细说明
2010/08/19 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JS实现transform实现扇子效果
2020/01/17 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python创建临时文件夹的方法
2015/07/06 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
python SOCKET编程基础入门
2021/02/27 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
党员党性分析材料
2014/02/17 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
幼师自荐信范文
2015/03/06 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android