微信小程序开发实战(1):使用滚动视图
<view>
<view class="section__title">垂直滚动</view>
<scroll-view scroll-y="true" style="height: 200px;" >
<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>

<scroll-view scroll-y="true" style="height: 200px;" scroll-top="60">
… …
</scroll-view>

图2 设置scroll-top属性的效果
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" upper-threshold="100" lower-threshold="300" bindscroll="scroll" scroll-top="100" scroll-into-view="yellow" >
… …
</scroll-view>
<view>
<view class="section__title">水平滚动</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>
其中scroll-view_H样式的代码如下:
.scroll-view_H{
white-space: nowrap;
}

图3 scroll-view水平滚动的效果
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="50" style="width: 100%">
… …
</scroll-view>
显示效果如图4所示。
图4 设置scroll-left属性的效果
<view>
<view class="section__title">垂直滚动</view>
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" >
<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="section__title">水平滚动</view>
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="50" style="width: 100%"
bindscrolltoupper="upper" bindscrolltolower="lower" >
<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 app = getApp()
Page({
… …
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
})

图5 滚动到边缘的输出日志
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" upper-threshold="100" lower-threshold="300">
… …
</scroll-view>

图6 lower-threshold属性为默认值时触发下边缘滚动事件的位置
图7 lower-threshold属性为300时触发下边缘滚动事件的位置
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="50" style="width: 100%"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
<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>
scroll:function(e)
{
console.log(e.detail)
}
- scrollLeft:水平滚动时滚动条当前的位置,在垂直滚动时该值为0。
- scrollTop:垂直滚动时滚动条当前的位置,在水平滚动时该值为0。
- scrollHeight:垂直滚动时所有子视图的总高度(包括子视图之间的间距),在水平滚动时,该值是scroll-view组件的高度。
- scrollWidth:水平滚动时所有子视图的总宽度(包括子视图之间的间距)。在垂直滚动时,该值是scroll-view组件的宽度。
- deltaX:水平滚动时的增量,也就是从当前滚动条的位置移动到新位置的距离。从左向右水平移动,该值小于0,从右向左水平移动,该值大于0。通过该属性值可以判断水平移动的方向。
- deltaY:垂直滚动时的增量,也就是从当前滚动条的位置移动到新位置的距离。从上到下垂直移动,该值小于0,从下向上垂直移动,该值大于0。通过该属性值可以判断垂直移动的方向。

图8 滚动时输出的日志
微信小程序开发实战(1):使用滚动视图的更多相关文章
- 微信小程序开发实战视频教程
微信小程序开发实战视频教程发布 有全套的 pan.baidu.com/s/1o8GuJOY 密码:2dbo 腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间 ...
- [干货教程]仿网易云课堂微信小程序开发实战经验
本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...
- 微信小程序开发实战视频教程发布
昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够了.... 各位免费拿去,慢慢享用: 链接: http ...
- 微信开发(2)---微信小程序开发实战part1
微信开发现在来说,简单可以概括为两部分,微信公众号和微信小程序. 微信公众号的技术已经非常成熟.分为服务号和订阅号.简单的.可以弄一个个人订阅号,在编辑模式下就可以实现推送图文.自动回复.自定义菜单的 ...
- 微信小程序开发实战-天气小程序
园龄6年8个月了,还一篇文章都没写过,惭愧! 最近周末做了个天气预报小程序,在这里整理一下开发过程和注意点,给对小程序开发感兴趣的伙伴们提供点参考. 废话不多说,先上图最终效果: 下面进入正文: 第一 ...
- 微信小程序开发教程(九)视图层——.wxss详解
WXSS是一套样式语言,用于描述WXML的组件样式. 官方文档表示,WXSS的选择器目前支持(“.class”.“#id”.“elemnt”.“element,element”.“::after”.“ ...
- 微信小程序开发教程(八)视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
- 微信小程序开发实战(云开发)--资产管理工具
添加首页 menu页面 截图展示 menu.js源码 // pages/menu/menu.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听 ...
- 这是一篇满载真诚的微信小程序开发干货
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...
随机推荐
- XML外部实体注入[转载]
前言 对于xxe,深入的太少,一般做题也是复制payload再修改,没有了解过内部的结构规范等.这里转载了一篇先知社区的文章,排版了一下适合博客样式.文章总结的很好,结合了很多篇的博客文章,看完也是对 ...
- pytorch Dataset数据集和Dataloader迭代数据集
import torch from torch.utils.data import Dataset,DataLoader class SmsDataset(Dataset): def __init__ ...
- java学习(第四篇)数组
一.一维数组 1.声明,分配内存 int[] a=new int[10]; 数组元素的数据类型 [] 数组名=new 类型 [数组元素个数]: 2.初始化 int[] a=new int[] {1,2 ...
- Java之JVM(初学者)
学习Java的第一次总结 1.Java程序的编译和执行 通过上图,我们轻易得出java执行过程:由javac编译为字节码文件,通过JVM转换为底层操作系统可识别的命令操作. 注意:①Java跨平台的始 ...
- PHP版DES算法加密数据(3DES)另附openssl_encrypt版本
PHP版DES算法加密数据(3DES) 可与java的DES(DESede/CBC/PKCS5Padding)加密方式兼容 <?php /** * Created by PhpStorm. * ...
- NodeJS反向代理websocket
如需转载请标明出处:http://blog.csdn.net/itas109QQ技术交流群:129518033 文章目录NodeJS反向代理websocket@[toc]前言代码相关问题:1.http ...
- 图论--割边--Tarjan模板
#include<iostream> #include<stdio.h> #include<vector> using namespace std; const i ...
- IO与反射机制总结
IO与反射机制全面总结 一.file类:属于java.io包中kkb 作用:操作文件或目录 file既可以表示文件,也可以表示目录,也可以表示盘符.利用他可以用来对文件进行操作. file中常用的构造 ...
- speedtest 测试服务器上传下载速度
下载speedtest.py wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py 赋予执行权限 ...
- C :uthash
参考: [1] uthash | 学步园 [2] 源码 [3] 官方文档 [4] [5] 一.哈希表的概念及作用 在一般的线性表或者树中,我们所储存的值写它的存储位置的关系是随机的.因此,在查找过程中 ...