微信小程序 教程之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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP 图片水印类代码
2012/08/27 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
vue-cli入门之项目结构分析
2017/04/20 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
从零学Python之hello world
2014/05/21 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
2014年信息宣传工作总结
2014/12/18 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL