详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现


Posted in Javascript onMarch 14, 2019

一、实践踩坑

项目使用mpvue开发

1. scroll-view默认是不滚动的。。所以要先设置scroll-x="true"或者scroll-y="true"

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了。所以要scroll-view的样式要这样设置:

scroll-view {
   width: 100%;
   white-space: nowrap; // 不让它换行
  }

3. 然后在定宽元素里边添加子容器:

// html大概长这样
<scroll-view scroll-x="true">
 <div class="tab-item">
  <img class="content-icon"/>
  <div></div>
 </div>
 <div class="tab-item">
  <img class="content-icon"/>
  <div></div>
 </div>
 <div class="tab-item">
  <img class="content-icon"/>
  <div></div>
 </div>
</scroll-view>

// css相应就大概长这样
scroll-view {
  display: flex;
  flex-wrap: nowrap;
}
.tab-item {
  display: flex;
  justify-content: center;
  width: 25%;
  ...
}

然后发现.tab-item并没有排在一行上。。说明scroll-view.tab-item都设置display: flex无效?无奈之下,只好在它外边再包一层,然后样式设置display: inline-block。此时正确姿势如下:

// html
<div class="scroll-view-container">
 <scroll-view scroll-x="true" :scroll-into-view="toView">
  <div class="tab-container">
   <div class="tab-item">
    <img class="content-icon"/>
    <div></div>
   </div>
  </div>
 </scroll-view>
</div>

// css变成这样子
scroll-view {
 width: 100%;
 white-space: nowrap; // 不让它换行
}

.tab-container {
 display: inline-block;
 width: 25%;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  ...
}

到这里,scroll-view就基本如我所愿了,大概长这样:

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

二、隐藏滚动条

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

/*隐藏滚动条*/

::-webkit-scrollbar{

  width: 0;
  
  height: 0;
  
  color: transparent;

}

或者有的人说这样子:

/*隐藏滚动条*/

::-webkit-scrollbar{

  display: none;

}

然而两种方法我都试过,scroll-view的滚动条依然存在。。测试机型是安卓机子。

但是用display: none这种方法是可以隐藏掉页面的滚动条的,就是scroll-view的滚动条没隐藏掉。

后来,在小程序社区看到官方人员这样子解答:

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

是的,就是这种野路子。当然 ,它下面的评论里也有人提供了另一种解决思路方法,但我还是选择了官方说的那种野路子方法。传送门

实现思路就是,在scroll-view外边再包一个容器,它的高度小于scroll-view的高度,这样就会截掉滚动条,达到隐藏了滚动条的效果。

// scss
.scroll-view-container { // 包裹scroll-view的容器
  height: $fakeScrollHeight;
  overflow: hidden; // 这个设置了就能截掉滚动条啦
  scroll-view {
   width: 100%;
   white-space: nowrap;
  }
 }

 .tab-container { // 我这里是用.tab-container来撑开scroll-view的高度,所以高度在它上面设置,加上padding,那么它就会比外层容器(.scroll-view-container)要高
  display: inline-block;
  width: 26%;
  height: $fakeScrollHeight;
  padding-bottom: $scrollBarHeight;
 }

大概意思是这样:

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

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

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
JS常用算法实现代码
Nov 14 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
详解React项目中碰到的IE问题
Mar 14 #Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 #Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 #Javascript
Node.js + express基本用法教程
Mar 14 #Javascript
Vue渲染过程浅析
Mar 14 #Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 #Javascript
详解使用React制作一个模态框
Mar 14 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
js 对象是否存在判断
2009/07/15 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python的几种主动结束程序方式
2019/11/22 Python
AUC计算方法与Python实现代码
2020/02/28 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
手机业务员岗位职责
2013/12/13 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年采购工作总结
2015/04/10 职场文书