详解微信小程序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 相关文章推荐
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
layDate日期控件使用方法详解
Nov 15 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
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python实现音乐下载的统计
2018/06/20 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
django框架模板语言使用方法详解
2019/07/18 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
Android笔试题总结
2014/11/29 面试题
幼儿园大班教学反思
2014/02/10 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
争先创优活动总结
2014/08/27 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2014年收银工作总结
2014/11/13 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android