微信小程序组件之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中typeof的用途介绍
Apr 11 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
Discuz! Passport 通行证整合
2008/03/27 PHP
php中stream(流)的用法
2014/03/25 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
详解javascript void(0)
2020/07/13 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python生成器表达式和列表解析
2016/03/10 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python实现word2Vec model过程解析
2019/12/16 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
大学校园活动策划书
2014/02/04 职场文书
服务承诺书格式
2014/05/21 职场文书
工会主席事迹材料
2014/06/03 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
单位授权委托书范本
2014/09/26 职场文书
复活读书笔记
2015/06/29 职场文书