详解微信小程序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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
详解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中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php输出图像的方法实例分析
2017/02/16 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Python引用计数操作示例
2018/08/23 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python检测服务器端口代码实例
2019/08/31 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
通过cmd进入python的步骤
2020/06/16 Python
python else语句在循环中的运用详解
2020/07/06 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
暑期实习鉴定
2013/12/16 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
财务总经理岗位职责
2014/02/16 职场文书
四年级学生评语大全
2014/04/21 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
公司委托书格式范本
2014/09/16 职场文书
设备收款委托书范本
2014/10/02 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
公司总经理岗位职责
2015/04/01 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书