小程序滚动界面参数代码示例- 技术文档

小程序滚动界面参数代码示例

网友投稿 525 2024-07-09 11:21:50

滚动

#pageScrollTo

ft.pageScrollTo(Object object)

将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

参数

Object object

属性	类型	默认值	必填	说明	最低版本
scrollTop	number		否	滚动到页面的目标位置，单位 px
duration	number	300	否	滚动动画的时长，单位 ms
selector	string		否	选择器	2.7.3
offsetTop	number		否	偏移距离，需要和 selector 参数搭配使用，可以滚动到 selector 加偏移距离的位置，单位 px	3.0.8
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

selector 语法

selector类似于 CSS 的选择器，但仅支持下列语法。

ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes

示例代码

ft.pageScrollTo({
  scrollTop: 0,
  duration: 300})
        已复制代码

#ScrollViewContext

基础库 3.0.45 开始支持

scroll-view 增强实例

示例代码

// 获取 ScrollViewContextft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
  })
        已复制代码

#ScrollViewContext 属性

属性	类型	说明	最低版本
scrollEnabled	boolean	滚动开关	3.0.45

示例代码

ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
    scrollViewContext.scrollEnabled = false
  })
        已复制代码

#ScrollViewContext 方法

#scrollIntoView

scrollIntoView(String selector)

滚动至指定位置

参数

String selector

属性	类型	默认值	必填	说明	最低版本
selector	string		是	元素选择器，目标元素必须是 scroll-view 的子元素	3.0.45

示例代码

ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
    scrollViewContext.scrollIntoView('.some-class');
  })
        已复制代码

#scrollTo

scrollTo(Object object)

滚动至指定位置

参数

Object object

属性	类型	默认值	必填	说明	最低版本
top	number		否	顶部距离	3.0.45
left	number		否	左边界距离	3.0.45
velocity	number		否	初始速度（未支持）	3.0.45
duration	number	300	否	滚动动画时长	3.0.45
animated	boolean	false	否	是否启用滚动动画	3.0.45

示例代码

ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
    scrollViewContext.scrollTo({
      top: 0,
      duration: 400,
      animated: false
    });
  })