专栏名称: 知晓程序

知晓程序，是爱范儿旗下专注「小程序生态」的品牌，提供小程序资讯、教程、活动、社区等服务。更多内容请访问 minapp.com。

开发 | 餐饮小程序必备！教你轻松做出像「饿了么」一样的点餐界面

知晓程序 · 公众号 · 科技公司 · 2017-11-29 08:40

正文

作者：zyh2668

知晓程序注：

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

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

今天，知晓程序就来为大家讲解，如何在小程序中使用 sticky 的方法，将页面元素固定在屏幕上。

关注「知晓程序」微信公众号，回复「开发」，获取小程序优化秘籍。

什么是 sticky 效果？

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

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

如果不考虑不同浏览器兼容性，CSS 3 就有一个


      
       position: sticky

属性，就能实现这种效果。

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

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

在小程序里实现 sticky 效果， 我们需要利用小程序


      
       scroll-view

组件里的


      
       scroll-into-view

属性。

首先，我们需要获取每个


      
       scroll-into-view

的


      
       scrollTop

，并且监听


      
       scroll

的滚动，并改变


      
       scroll-into-view

的值。

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

左侧列表页没什么好讲的，无非就是按下某个类型，给上一个


      
       checked

样式，然后改变


      
       toView

的值。

那么


      toView

是什么呢？ 首先，


      
       toView

的值是和


      
       scroll-view

里面你需要跳转的


      
       view

的 id 对应起来的 ，也就是以下代码中的

id

。

当用户按下左侧对应的按钮，右侧的


      
       scroll

就会跳转到相应

id

的


      
       scroll-into-view

里面。

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

假如不是小程序的话，应该很多人都知道怎么做——无非就是监听滚动条，判断滚动条的位置，然后根据区域去改变左侧的选择。但是， 小程序如何获得


      
       scroll-into-view

在


      
       scroll-view

里面的位置呢？

众所周知，小程序不能使用 DOM 操作页面，也没法使用 jQuery 的

对象，快捷获取


      
       scrollTop

，还不能像 vue 一样，直接操作

$el

。

还好，小程序基础库 1.4.x 开放了一个接口：


      
       wx.createSelectorQuery()

。

使用这个接口，小程序将会返回一个


      
       SelectorQuery

对象实例。我们 可以在这个实例上 选择节点，使用一些 方法，选择需要查询的信息。

添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。其功能类似于 DOM 的


      
       getBoundingClientRect

。返回值是


      
       nodesRef

对应的


      
       selectorQuery

。

返回的节点信息中，每个节点的位置用


      
       left

、


      
       right

、

top

、


      
       bottom

、


      
       width

、


      
       height

字段描述。如果提供了


      
       callback

回调函数，在执行


      
       selectQuery

的


      
       exec

方法后，节点信息会在


      
       callback

中返回。

然后， 我们可以通过这个方法拿到所有的


      
       scroll-into-view

的位置。

需要注意的是，这个操作必须得放在


      
       onReady()

的时候去做，否则将无法得到


      
       rect

属性。

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

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

「坑」与问题

首先，


      
       scroll-view

开发 | 餐饮小程序必备！教你轻松做出像「饿了么」一样的点餐界面

正文

请到「今天看啥」查看全文