前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开发 | 餐饮小程序必备!教你轻松做出像「饿了么」一样的点餐界面

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

作者头像
知晓君
发布2018-07-27 11:03:19
9470
发布2018-07-27 11:03:19
举报
文章被收录于专栏:知晓程序

作者:zyh2668

知晓程序注:

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

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

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

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

什么是 sticky 效果?

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

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

如果不考虑不同浏览器兼容性,CSS 3 就有一个 position: sticky 属性,就能实现这种效果。

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

在小程序里,如何实现 sticky 效果?

在小程序里实现 sticky 效果,我们需要利用小程序 scroll-view 组件里的 scroll-into-view 属性

首先,我们需要获取每个 scroll-into-viewscrollTop,并且监听 scroll 的滚动,并改变 scroll-into-view 的值。

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

左侧列表页没什么好讲的,无非就是按下某个类型,给上一个 checked 样式,然后改变 toView 的值。

那么 toView 是什么呢?首先,toView 的值是和 scroll-view 里面你需要跳转的 viewid 对应起来的,也就是以下代码中的 id

当用户按下左侧对应的按钮,右侧的 scroll 就会跳转到相应 idscroll-into-view 里面。

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

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

众所周知,小程序不能使用 DOM 操作页面,也没法使用 jQuery 的 $ 对象,快捷获取 scrollTop,还不能像 vue 一样,直接操作 $el

还好,小程序基础库 1.4.x 开放了一个接口:wx.createSelectorQuery()

使用这个接口,小程序将会返回一个 SelectorQuery 对象实例。我们可以在这个实例上选择节点,使用一些方法,选择需要查询的信息。

添加节点的布局位置的查询请求,相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回值是 nodesRef 对应的 selectorQuery

返回的节点信息中,每个节点的位置用 leftrighttopbottomwidthheight 字段描述。如果提供了 callback 回调函数,在执行 selectQueryexec 方法后,节点信息会在 callback 中返回。

然后,我们可以通过这个方法拿到所有的 scroll-into-view 的位置。

需要注意的是,这个操作必须得放在 onReady() 的时候去做,否则将无法得到 rect 属性。

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

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

「坑」与问题

首先,scroll-view 必须设置高度,否则在 iOS 上,将无法使用 scroll-into-view 跳转。另外,页面渲染完成后,才能使用 createSelectorQuery

此外,scroll 会有个惯性运动。这时候,按左侧的按钮切换 scroll-into-view 会和 onScroll 事件发生一些冲突,实测在 iOS 存在有该问题,希望大神给予些指导意见。

最后的话

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

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

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

原文地址: https://juejin.im/post/5a03106cf265da432f308da4

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-11-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档