详解微信小程序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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 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使用GD库创建图片缩略图的方法
2015/06/10 PHP
PHP多态代码实例
2015/06/26 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jQuery的三种$()
2009/12/30 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python代码如何注释
2020/06/01 Python
thinkphp5 路由分发原理
2021/03/18 PHP
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
婚庆司仪开场白
2015/05/29 职场文书
联欢会开场白
2015/06/01 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL