微信小程序 教程之wxapp视图容器 scroll-view


Posted in Javascript onOctober 19, 2016

相关文章:

  1. 微信小程序 教程之wxapp视图容器 swiper
  2. 微信小程序 教程之wxapp视图容器 scroll-view
  3. 微信小程序 教程之wxapp 视图容器 view

scroll-view

可滚动视图区域。

属性名 类型 默认值 说明
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,则滚动到该元素,元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle   滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。

示例代码:

<view class="section">
 <view class="section__title">vertical scroll</view>
 <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 <view id="green" class="scroll-view-item bc_green"></view>
 <view id="red" class="scroll-view-item bc_red"></view>
 <view id="yellow" class="scroll-view-item bc_yellow"></view>
 <view id="blue" class="scroll-view-item bc_blue"></view>
 </scroll-view>

 <view class="btn-area">
 <button size="mini" bindtap="tap">click me to scroll into view </button>
 <button size="mini" bindtap="tapMove">click me to scroll</button>
 </view>
</view>
<view class="section section_gap">
 <view class="section__title">horizontal scroll</view>
 <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
 <view id="green" class="scroll-view-item_H bc_green"></view>
 <view id="red" class="scroll-view-item_H bc_red"></view>
 <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
 <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-view>
</view>
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
 data: {
 toView: 'red',
 scrollTop: 100
 },
 upper: function(e) {
 console.log(e)
 },
 lower: function(e) {
 console.log(e)
 },
 scroll: function(e) {
 console.log(e)
 },
 tap: function(e) {
 for (var i = 0; i < order.length; ++i) {
  if (order[i] === this.data.toView) {
  this.setData({
   toView: order[i + 1]
  })
  break
  }
 }
 },
 tapMove: function(e) {
 this.setData({
  scrollTop: this.data.scrollTop + 10
 })
 }
})
scroll-view

微信小程序 教程之wxapp视图容器 scroll-view

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 #Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 #Javascript
使用Angular.js开发的注意事项
Oct 19 #Javascript
js表单登陆验证示例
Oct 19 #Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 #Javascript
Angular和百度地图的结合实例代码
Oct 19 #Javascript
Bootstrap Table使用方法解析
Oct 19 #Javascript
You might like
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python 多线程的实例详解
2017/09/07 Python
python GUI实例学习
2017/11/21 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
基于python实现学生信息管理系统
2019/11/22 Python
如何基于Python实现自动扫雷
2020/01/06 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
介绍java中初始化块的使用
2012/09/11 面试题
init进程的作用
2012/04/12 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
简历的自我评价
2014/02/03 职场文书
教师暑期培训感言
2014/08/15 职场文书
学校学期工作总结
2015/08/13 职场文书
2016年党建工作简报
2015/11/26 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书