零基础学做网站培训介绍

当前位置:

微信小程序可滚动视图区域scroll-view组件

以下为学做网站论坛关于“微信小程序可滚动视图区域scroll-view组件”讲解视频教程。

微信小程序可滚动视图区域scroll-view组件是定义微信小程序的一个固定显示区域,这个区域里的内容可以滚动显示。

需要给scroll-view设置一个固定的宽度和高度。通过 WXSS 设置 height和width。横向滚动还要设置white-space: nowrap;里面的块状元素需要设置display:inline-block横排。

组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

scroll-view组件作用是可以监听页面下拉滚动时,记录顶部的距离值。

基本语法


<scroll-view scroll-y="true" bindscrolltoupper="start" scroll-top="50" class="div">
<view class="div1"></view>
<view class="div2"></view>
<view class="div3"></view>
</scroll-view>

常用属性

属性 类型 默认值 必填 说明 特别低版本
scroll-x boolean false 允许横向滚动 (wxss需要设置:white-space: nowrap;)内元素display:inline-block横排 1.0.0
scroll-y boolean false 允许纵向滚动 1.0.0
upper-threshold number/string 50 距顶部/左边多远时,触发 scrolltoupper 事件 1.0.0
lower-threshold number/string 50 距底部/右边多远时,触发 scrolltolower 事件 1.0.0
scroll-top number/string 设置竖向滚动条默认位置 1.0.0
scroll-left number/string 设置横向滚动条默认位置 1.0.0
scroll-into-view string 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 1.0.0
scroll-with-animation boolean false 在设置滚动条位置时使用动画过渡 1.0.0
enable-back-to-top boolean false iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 1.0.0
enable-flex boolean false 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。 2.7.3
scroll-anchoring boolean false 开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。 2.8.2
refresher-enabled boolean false 开启自定义下拉刷新 2.10.1
refresher-threshold number 45 设置自定义下拉刷新阈值 2.10.1
refresher-default-style string "black" 设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式 2.10.1
refresher-background string "#FFF" 设置自定义下拉刷新区域背景颜色 2.10.1
refresher-triggered boolean false 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 2.10.1
enhanced boolean false 启用 scroll-view 增强特性 2.12.0
bounces boolean true iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效) 2.12.0
show-scrollbar boolean true 滚动条显隐控制 (同时开启 enhanced 属性后生效) 2.12.0
paging-enabled boolean false 分页滑动效果 (同时开启 enhanced 属性后生效) 2.12.0
fast-deceleration boolean false 滑动减速速率控制 (同时开启 enhanced 属性后生效) 2.12.0
binddragstart eventhandle 滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } 2.12.0
binddragging eventhandle 滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } 2.12.0
binddragend eventhandle 滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity } 2.12.0
bindscrolltoupper eventhandle 滚动到顶部/左边时触发 1.0.0
bindscrolltolower eventhandle 滚动到底部/右边时触发 1.0.0
bindscroll eventhandle 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 1.0.0
bindrefresherpulling eventhandle 自定义下拉刷新控件被下拉 2.10.1
bindrefresherrefresh eventhandle 自定义下拉刷新被触发 2.10.1
bindrefresherrestore eventhandle 自定义下拉刷新被复位 2.10.1
bindrefresherabort eventhandle 自定义下拉刷新被中止 2.10.1

注意:

  1. 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
  2.  scroll-into-view 的优先级高于 scroll-top
  3. 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
  4. 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部
  5. scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如何注册微信小程序 图文教程 (110235 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (111711 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 微信小程序制作步骤 图文教程 (111344 次浏览)
    上一步,我们完成了微信小程序的授权。这一步,就是使用我们购买的“微信小程序细致制作工具”,进行小程序的制作了。方法/步骤 点击左侧菜单的“
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图
  • 微信小程序可滚动视图区域scroll-view组件是定义微信小程序的一个固定显示区域,这个区域里的内容可以滚动显示。需要给scroll-view设置一个固定的
  • 微信小程序Video视频组件是用于微信小程序中插入视频的组件。网络视频地址:[cce_html]http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload
  • 微信小程序滚动选择器picker组件的作用是制作出微信小程序中底部弹起的滚动选择器。滚动选择器分为以下几种:(使用时,使用mode属性来确定)