创新互联小程序教程：微信小程序扩展组件·粘性布局组件

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 属性可以设置组件在吸顶时与顶部的距离

指定容器

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

Page({
  data: {
    container: null
  },

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

分享名称：创新互联小程序教程：微信小程序扩展组件·粘性布局组件
网站URL：http://www.shufengxianlan.com/qtweb/news24/288574.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容