微信小程序组件之srcoll-view的详解


Posted in Javascript onOctober 19, 2017

微信小程序组件之srcoll-view的详解

今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助。

首先展示一下想达到的效果。↓ vertical scroll实现上下滚动,horizontal实现左右滚动。

微信小程序组件之srcoll-view的详解

先附上wxml的代码。

<view class="container"> 
 <view> 
  <text>vertical scroll</text> 
  <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> 
   <view id="green" class="scroll-y-item bg_green"></view> 
   <view id="red" class="scroll-y-item bg_red"></view> 
   <view id="blue" class="scroll-y-item bg_blue"></view> 
   <view id="yellow" class="scroll-y-item bg_yellow"></view> 
  </scroll-view> 
 </view> 
 
 <view> 
  <text>horizontal scroll</text> 
  <scroll-view scroll-x class="scroll-view-x" style="width:100%"> 
   <view class="scroll-view-x"> 
    <view class="scroll-x-item bg_green"></view> 
    <view class="scroll-x-item bg_red"></view> 
    <view class="scroll-x-item bg_blue"></view> 
    <view class="scroll-x-item bg_yellow"></view> 
   </view> 
  </scroll-view> 
 </view> 
</view>

1.整个界面由一个view包装起来,该view的class为创建quickStart时自带,可根据需要自己调整。之后,两个view各包装一个scrollview及其上面的text文本。

2.第一个scroll-view需竖直滚动,为其设置scroll-y="{{true}}"(或者直接写scroll-y)。该scrollview的class为“scroll-view-y”,之后会附上代码。scroll-top属性设置滚动条的初始位置,scrollTop在js文件的data中声明赋值(不需要可去掉)。

3.scrollview中四个不用颜色的view,除颜色外其他属性相同。

为竖直scrollview的wxss代码

.scroll-view-y { 
 height: 200px; 
 width: 100%; 
} 
 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

4.水平方向的scrollview与竖直方向基本类似,着重说一下区别。

(1) 竖直方向的scrollview直接包住4个不同颜色的view,水平方向需要先用view包住各颜色块,这是为了保证各颜色块水平排布。

(2) wxss文件    

为水平scrollview的wxss代码,scroll-view-x为水平滑块的属性,scroll-x-item为水平滑块中各颜色块的属性。

.scroll-view-x { 
 width: 300px; 
 height: 100px; 
 display: flex; 
 overflow: scroll; 
} 
 
.scroll-x-item { 
 width: 95px; 
 height: 100%; 
 display: inline-table; 
}

可以看到:

①水平滑块多了两个属性,display和overflow。display设置为flex弹性伸缩显示,overflow设置当子布局超出父容器时scroll展示。

②颜色块display属性设置为 inline-table,这个很重要!!!最开始没有写这个属性,很久都无法实现scrollview的水平滑动。在我不断的尝试下,终于试出来了,很开心!吐舌头

附上微信官方属性说明↓

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-top Number   设置竖向滚动条位置
scroll-left Number   设置横向滚动条位置
scroll-into-view String   值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupper EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle   滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! 

Javascript 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 #Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 #Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 #Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 #Javascript
微信小程序支付之c#后台实现方法
Oct 19 #Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 #Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php实现简单文件下载的方法
2015/01/30 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python简单实现安全开关文件的两种方式
2016/09/19 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python实现二维插值的三维显示
2018/12/17 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python中tab键是什么意思
2020/06/18 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
PHP经典面试题
2016/09/03 面试题
2013年高中生自我评价
2013/10/23 职场文书
领导欢迎词范文
2015/01/26 职场文书
监考失职检讨书
2015/01/26 职场文书
5.12护士节活动总结
2015/02/10 职场文书
原告代理词范文
2015/05/25 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL