微信小程序dom *** 作

文档： https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html

即使是小程序，也难免有dom *** 作

wx.createSelectorQuery()返回一个SelectorQuery对象实例

nodesRef.boundingClientRect([callback])

nodesRef.scrollOffset([callback])

nodesRef.fields(fields, [callback])

selectorQuery.in(component) 将选择器的选取范围更改为自定义组件component内

selectorQuery.select(selector) 在当前页面下选择第一个匹配选择器selector的节点，返弯指回一个NodesRef对象实例，可以用于获取节点信息

selectorQuery.selectAll(selector) 在当前页面下选择匹配选择器selector的节点，返回一个NodesRef对象实例。它选择所有匹配选腔游择器的节点。

selectorQuery.selectViewport() 选择显示区域，可用于获取显示区域埋圆配的尺寸、滚动位置等信息，返回一个NodesRef对象实例

selectorQuery.exec([callback]) 执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回

众多类似商城项目中，都会有列表分类标签随着界面滚动吸顶的效果

APP中实现相关功能很容易，h5也可以动态 *** 作DOM来设置

微信小程序没有DOM，该怎么实现呢？

其实这个场景还是比较简单的，碰猜唤正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置

根据场景，有两个参考思路：

1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可

2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置

ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少兆行了一部分而上移，所以还是需要补白，所以还是用第一种思路

我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别

CSS部分

JS部分

其中 CacheUtil.naviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略

这里为什么用navigator而不用view呢？

因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，笑凯所以navigator在不设置url的情况下和view的效果差不多，故采用navigator

cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑

小程序是一种不需要下载安装即可使用弊塌斗的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、租磨公众号关联等七大功能。其中，通过公众号关联，用户可以实现公衫春众号与小程序之间相互跳转。由于小程序不存在入口。

---