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

网友投稿 206 2024-07-09

滚动

#pageScrollTo

ft.pageScrollTo(Object object)

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

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

参数

Object object

属性类型默认值必填说明最低版本
scrollTopnumber
否滚动到页面的目标位置，单位 px
durationnumber300否滚动动画的时长，单位 ms
selectorstring
否选择器2.7.3
offsetTopnumber
否偏移距离，需要和 selector 参数搭配使用，可以滚动到 selector 加偏移距离的位置，单位 px3.0.8
successfunction
否接口调用成功的回调函数
failfunction
否接口调用失败的回调函数
completefunction
否接口调用结束的回调函数（调用成功、失败都会执行）

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 属性

属性类型说明最低版本
scrollEnabledboolean滚动开关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

属性类型默认值必填说明最低版本
selectorstring
是元素选择器，目标元素必须是 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

属性类型默认值必填说明最低版本
topnumber
否顶部距离3.0.45
leftnumber
否左边界距离3.0.45
velocitynumber
否初始速度（未支持）3.0.45
durationnumber300否滚动动画时长3.0.45
animatedbooleanfalse否是否启用滚动动画3.0.45

示例代码

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


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：参数 示例 程序 代码 小程序
上一篇:小程序下拉刷新参数及代码示例
下一篇:小程序开发创建动画参数参考
相关文章

 发表评论

暂时没有评论，来抢沙发吧~