微信小程序 教程之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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php伪静态之APACHE篇
2014/06/02 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
Python中实现结构相似的函数调用方法
2015/03/10 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
三好学生个人先进事迹材料
2014/05/17 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
党员公开承诺书2016
2016/03/24 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL