小程序实现吸顶效果

本文实例为大家分享了微信小程序实现吸顶特效的具体代码，供大家参考，具体内容如下

首先上原始的图

wxml:

<view class="tab1 {{oneFixed}}" id="tab">
				<!-- tabBar -->
				<import src="/pages/templates/common/nav/cuNav" />
				<template is="cuNav" data="{{TabCur:tabCurrent,stateTabs,tabSelect:'tabSelect'}}" />
			</view>

wxss:

.Fixed

{

 position: fixed;

 top: 0;

 z-index: 2;

}

js:

data:{
 oneFixed:"",
 tabTop:"0",
},
onShow(options) { 
   const query=wx.createSelectorQuery();
    query.select('#tab').boundingClientRect(function(res){
      _that.data.tabTop=res.top//136.5
      console.log(res.top,'res.top')
    }
    ).exec();
  },
onPageScroll:function(event){
   console.log(event.scrollTop > this.data.tabTop)
    if(event.scrollTop>this.data.tabTop)
    {
      this.setData({oneFixed:"Fixed"})
    }else{
      this.setData({oneFixed:''})
    }
},

关于SelectorQuery wx.createSelectorQuery()

小程序官方文档是这样解释的:

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

示例代码

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

网址:https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

最后实现的效果: