头条

文 | zyh2668

【智慧商业头条】微信小软件开发分销商城NFT技术开发数字藏品交易平台区块链定制软件APP公众号小程序源码正版授权注：

许多购物、外卖小程序，都会做「分栏」设计，即在左侧展示商品分类、右侧展示分类下的具体商品。

如何将分类栏固定在屏幕上呢？使用 sitcky 特性，或许是个方案。

今天，【智慧商业头条】微信小程序软件开发分销商城NFT技术开发数字藏品交易平台区块链定制软件APP公众号小程序源码正版授权就来为大家讲解，如何在小程序中使用 sticky 的方法，将页面元素固定在屏幕上。

关注「【智慧商业头条】微信小程序软件开发分销商城NFT技术开发数字藏品交易平台区块链定制软件APP公众号小程序源码正版授权」微信公众号，回复「开发」，获取小程序优化秘籍。

什么是 sticky 效果？

简单地说，sticky 就是标题栏的「粘粘」效果，向下滑动时跟着列表走、向上滑动到顶部时将会固定在顶部。

顶部的蓝色条幅，就是 sticky 后的效果

position: sticky

{
  position: sticky;
  top: 0;
}

只需要这两行就能实现，然而…… 在不同浏览器中，这个属性的兼容性，那是相当的差。

在小程序里，如何实现固定效果？

scroll-viewscroll-into-view

scroll-into-viewscrollTopscrollscroll-into-view

下面，来让我们看一下具体该如何实现。

amp;lt;scroll-view scroll-y class="left-wrapper" id="left"amp;>
  amp;lt;view wx:for="..." bindtap="..."amp;>amp;lt;/viewamp;>
  amp;lt;!--这里是左侧的类型选择--amp;>
amp;lt;/scroll-viewamp;>
amp;lt;scroll-view scroll-y
 class="right-wrapper"
 bindscroll="onScroll"
 scroll-into-view="{{toView}}"
 id="right"amp;>
  amp;lt;view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}"amp;>
    amp;lt;view class="type-title" style="{{style}}"amp;>
      amp;lt;!-- 这个就是ticky header部分 --amp;>
      {{item.title}}
    amp;lt;/viewamp;>
    amp;lt;view class="content"amp;>
      amp;lt;view wx:for="{{item.child}}" class="item"amp;>
        amp;lt;!--这里是需要展示具体的列表项--amp;>
      amp;lt;/viewamp;>
    amp;lt;/viewamp;>
  amp;lt;/viewamp;>
amp;lt;/scroll-viewamp;>

checkedtoView

toViewtoViewscroll-viewviewidid

amp;lt;view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}"amp;>

scrollidscroll-into-view

到目前为止，我们已经实现了sticky header + 跳转的问题了。但如果滑动右侧的滚动条的话，左侧的数据如何跟着变化呢？

scroll-into-viewscroll-view

document.getElementById()$scrollTop$el

wx.createSelectorQuery()

SelectorQueryselectboundingClientRect

nodesRef.boundingClientRect([callback])

getBoundingClientRectnodesRefselectorQuery

leftrighttopbottomwidthheightcallbackselectQueryexeccallback

scroll-into-view

let query = wepy.createSelectorQuery()
for (let i = 0; i amp;lt; this.types.length; ++i) {
  let id = this.types[i]
  query.select(`#${id}`).boundingClientRect((rect) =amp;> {
    this.scrollTops[id] = rect.top
  }).exec()
}

onReady()rect

得到这个属性以后其实就很好操作了，直接上代码：

onScroll (event) {
  // 如果是右侧的滚动view
  if (event.currentTarget.id === #39;right#39;) {
    // 判断滚动的方向
    let top = event.detail.scrollTop
    this.dir = this.currentTop amp;lt; top ? #39;down#39; : #39;up#39;
    this.currentTop = top
    // 判断当前滚动条所在区域，如果不在当前区域则进行跳转
    if (top amp;> this.scrollTops[this.getNextView()] amp;amp;amp;amp;
     this.dir === #39;down#39; amp;amp;amp;amp;
     this.checked amp;lt; this.types.length - 1) {
      this.setChecked(this.checked + 1)
    }
    if (top amp;lt; this.scrollTops[this.toView] amp;amp;amp;amp;
     this.dir === #39;up#39; amp;amp;amp;amp;
     this.checked amp;> 0) {
      this.setChecked(this.checked - 1)
    }
  }
}

一个简单的、具有 sticky 效果的商品列表页，以及分类跳转功能，就实现了。

坑与问题

scroll-viewscroll-into-viewcreateSelectorQuery

scrollscroll-into-viewonScroll

最后的话

由于采用了 wepy 构建的小程序，所以在部分代码上会有出入或相似的地方。但我们主要学习的是思路。

wepy 的本意是希望小程序能像 vue 一样开发，由于本人一直在用vue做项目，所以用 wepy 开发小程序会顺手一些。

但是 wepy 虽然尽力贴合 vue，但在某些设计上存在着一定的问题。不过，使用 wepy 已经比直接开发小程序用起来舒服一些。

关注「【智慧商业头条】微信小程序软件开发分销商城NFT技术开发数字藏品交易平台区块链定制软件APP公众号小程序源码正版授权」公众号，在微信后台回复「开发」，让你的小程序性能再上一层楼。

华青创新|白小极！！

小程序头条

致力于为企业提供可定制化的智慧商业解决方案，专注于人工智云平台开发与落地技术应用。国家高新技术企业、国家高新技术企业，数字版权可信区块链研发团队，联通智慧仓储研发团队

让我们用天马行空的想象力，描绘美好创新世界！

公众号：【艾蒂娜科技】

【长按下面二维码关注公众号】

小白社交电商 致力于 打造全球领先简单高效的一站式社交电商解决方案，多渠道营销，融合线上线下打造健康闭合的电商生态圈，新零售电商。(简单高效，小白也可以玩转社交电商！快速运营上手，低成本迅速盈利)

小极商城 专注于顶级移动电子商务生态系统打造 ，灵活高效的8大分润体系、消费奖励系统、数十款营销插件、O2O多商户、区块链资产数字化。 为客户量身定制 专属商业模式(专注极致， 灵活高效 ，小极商城伴您的团队走向成功！用合理的模式管理千万团队，撬动整个市场。)

华青创新|白小极！！