文档章节

微信小程序的视图容器-- scroll-view

博为峰教研组
 博为峰教研组
发布于 2017/05/15 15:55
字数 392
阅读 73
收藏 0

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}

我们在.wxml文件中使用scroll-View

<scroll-view class="contentScroll" scroll-y="true" bindscrolltoupper="changeP">

<view class="view1"></view>

<view class="view2"></view>

<view class="view3"></view>

<view class="view4"></view>

</scroll-view>

我们在scroll-view中设置了4个view,这里绑定了,scroll-view滚动到顶部(垂直布局)bindscrolltoupper方法,并设置了scroll-y的值为true。表示允许纵向滚动。

在对应.wxss文件中实现布局,这里我们实现scroll-view的竖直滚动

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

.contentScroll{

    width: 100%;

    height: 500rpx;

    background-color: yellow;

}

.view1{

    width: 100%;

    height: 300rpx;

    background-color: red;

}

.view2{

    width: 100%;

    height: 300rpx;

    background-color: greenyellow;

}

.view3{

    width: 100%;

    height: 300rpx;

    background-color: cadetblue;

}

.view4{

    width: 100%;

    height: 300rpx;

    background-color: yellow;

}

在.js文件中执行changeP方法

changeP:function (){

      console.log("到顶部了");

    }

 

页面显示的效果:

页面可以纵向滚动,当滚动到最顶部时,在控制台会输出:到顶部了。

 

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
微信小程序实现纵向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-y,设置区域可以纵向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索页...

tianma3798
2018/08/24
1K
0
微信小程序实现横向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-x ,设置区域可以横向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索...

tianma3798
2018/08/24
720
0
浅谈微信小程序中的下拉刷新和上拉加载

下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 。而实现上拉加载相对来说就比较不方便了。 下拉刷新 虽然微信的官方文档有很多坑,但下拉刷新介绍的还...

2018/02/05
0
0
微信小程序原生组件swiper在mpvue工程中使用注意事项

时下微信小程序开发框架中mpvue是主流的选择之一。其中,免不了还要使用部分小程序原生的组件。swiper组件几乎成为典型小程序界面的必备组成组件之一。但是,我在试用中遇到一个典型问题,很...

googlingman
2018/12/20
0
0
小程序开发基础-scroll-view 可滚动视图区域

小编 / 达叔小生 小程序开发基础-scroll-view 可滚动视图区域 这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为,把纵向滚动改为横向滚动即可。 视图组件 是的属性,类...

达叔小生
2018/08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部