微信小程序 教程之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 相关文章推荐
jQuery列表拖动排列具体实现
Nov 04 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 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 Google的translate API代码
2008/12/10 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Python中的heapq模块源码详析
2019/01/08 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
幼儿园义卖活动方案
2014/01/17 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
初三新学期计划书
2014/05/03 职场文书
社区工作者演讲稿
2014/05/23 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
财务统计员岗位职责
2015/04/14 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
交通事故协议书范本
2016/03/19 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript