举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > 小程序如何增加用户粘性 微信小程序 扩展组件·粘性布局组件

小程序如何增加用户粘性 微信小程序 扩展组件·粘性布局组件

2023-04-18 16:18

小程序如何增加用户粘性 微信小程序 扩展组件·粘性布局组件

小程序如何增加用户粘性 微信小程序 扩展组件·粘性布局组件

小程序如何增加用户粘性

sticky

粘性布局组件。Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。

属性列表

属性 类型 默认值 必填 说明
offset-top Number 0 吸顶时与顶部的距离,单位px
z-index Number 99 吸顶时的 z-index
container function null 一个函数,返回容器对应的 NodesRef 节点
disabled Boolean false 是否禁用
bindscroll eventhandle 滚动时触发,{scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

代码演示

吸顶距离

通过 offset-top 属性可以设置组件在吸顶时与顶部的距离

<mp-sticky offset-top="32">
  <button size="mini" type="primary" style="margin-left: 115px; background-color: #1989fa">吸顶距离</button>
</mp-sticky>

指定容器

通过 container 属性可以指定组件的容器,页面滚动时,组件会始终保持在容器范围内,当组件即将超出容器底部时,会返回原位置。

<view id="container" style="height: 250px; background-color: #E0E0E0;">
  <view style="height: 100px; background-color: #FFFF99;"></view>
  <mp-sticky container="{{container}}" offset-top="64">
    <button size="mini" type="primary" style="margin-left: 215px; background-color: #ff976a">指定容器</button>
  </mp-sticky>
</view>
Page({
  data: {
    container: null
  },

  onReady() {
    this.setData({
      container: () => wx.createSelectorQuery().select("#container")
    })
  }
})


阅读全文
以上是编程学为你收集整理的小程序如何增加用户粘性 微信小程序 扩展组件·粘性布局组件全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  •  Vue 3.0 key attribute

    Vue 3.0 key attribute

    2023-03-27 VUE3教程

    #概览新增:对于 v-if/v-else/v-else-if的各分支项key将不再是必须的,因为现在 Vue 会自动生成唯一的key。非兼容:如果你手动提...

  •  Vue 3.0 实例property

    Vue 3.0 实例property

    2023-06-07 VUE3教程

    #$data类型:Object详细:组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。参考选项 / 数据 - data#$pr...

  •  XHTML高级教程-什么是XHTML链接?

    XHTML高级教程-什么是XHTML链接?

    2023-06-21 XHTML教程

    链接是XHTML文档中的下一个元素。本章的内容讨论如何完成XHTML文档的链接,如何在网站中插入图像以及如何创建超链接。XHTML中的...

  •  XHTML 合法 DTD

    XHTML 合法 DTD

    2023-04-25 XHTML教程

    //www..cn/htmltags/html-elementsdoctypes.html...

  •  XHTML高级教程-字体样式标签

    XHTML高级教程-字体样式标签

    2023-05-11 XHTML教程

    字体样式标签为文本增加了更丰富的效果。格式化时使用它们。这些标签与HTML中使用的标签完全相似。其中一些标签是粗体,斜体等粗...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部