小程序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与flash交互通信基础教程
Aug 07 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
微信小程序云开发之云函数详解
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 已经成熟
2006/12/04 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP分页类集锦
2014/11/18 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
AngularJS快速入门
2015/04/02 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python使用mysql的两种使用方式
2018/03/07 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
刑事案件上诉状
2015/05/23 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
sass 常用备忘案例详解
2021/09/15 HTML / CSS