微信小程序之某个节点距离顶部和底部的距离 createSelectorQuery
这个方法可以用来在上滑滚动的时候,让某一个区域置顶,
在下滑的时候,又变为原来的位置哈!
<huadong :class="{'hident':isFixed}" id="box"></huadong>
onLoad() {
const query = wx.createSelectorQuery();
query.select('#box').boundingClientRect();
query.exec((res) => {
console.log(res); //这个节点距离顶部的距离 和距离底部的距离
this.menutop = res[0].top;
})
}

微信小程序之某个节点距离顶部和底部的距离 createSelectorQuery的更多相关文章
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- 微信小程序 实现点击返回顶部
效果: wxml: <!-- 点击回顶部 --> <image src='/images/top.jpg' class='goTop' hidden='{{showTop}}' bi ...
- 微信小程序监听view到顶部的高度
view style='width:100%;height:80rpx;' id='navigation'></view> wx.createSelectorQuery().sele ...
- 【重点突破】—— UniApp 微信小程序开发官网学习One
一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- WordPress版微信小程序2.1.5版发布
WordPress版微信小程序功能已经基本完善,利用这套程序,搭配WordPress提供的rest api,WordPress网站的站长可以快速搭建属于自己的网站微信小程序 . WordPress版微 ...
- 微信小程序从零开始开发步骤(一)搭建开发环境
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...
- 微信小程序-页面下拉
微信小程序当滑动到最顶部和最底部时,继续下拉,会将整个页面拉下去或者拉上去,本来以为是客户端自有的特性,就没去管他,直到我的禅道出现了这个记录... 其实这个问题是可以解决的,只需要在你不想出现在此情 ...
- 微信小程序切换标签改变样式
微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...
随机推荐
- AOC萌新探索:搭建和体验在线AOC环境
摘要:AOC是一个做网络设备自动化运维以及三方设备纳管的一个能力平台. 本文分享自华为云社区<AOC萌新探索之旅第一期--在线AOC环境初体验>,作者:oysterzz. 接触AOC没多久 ...
- 一图解析MySQL执行查询全流程
摘要:当我们希望MySQL能够以更高的性能运行查询时,最好的办法就是弄清楚MySQL是如何优化和执行查询的. 本文分享自华为云社区<mysql执行查询全流程解析>,作者:breakDraw ...
- 网站web服务器个人博客站开通那些端口合适?
一般网站服务器,只需要开通80 443,(ssh端口默认22,,建议修改) ping命令没有端口,因为ICMP 协议没有到tcp层,仅走ip层,由于IP层协议是一种点对点的协议,而非端对端的协议,它提 ...
- 火山引擎A/B测试:MAB智能调优实验,企业活动效果提升新利器
618临近,各大电商APP的预热活动已然拉开序幕.对企业而言,一场活动从策划到上线,中间经过效果验证,其业务成本很高.一个好的活动创意从策划.开发.到最终发布,至少会经历几周实践,如果中间还经历A ...
- Cursor,程序员的 AI 代码编辑助手
相信大家都或多或少地听说过.了解过 chatGPT ,半个月前发布的 GPT-4 ,可谓是 AI 赛道上的一个王炸 那么今天咸鱼给大家分享一个开源的 AI 代码编辑器--Cursor,让各位程序员在编 ...
- AcWing 第 2 场周赛
比赛链接:Here AcWing 3626. 三元一次方程 暴力即可 void solve() { int n; cin >> n; for (int i = 0; i <= n / ...
- redis命令Incr做计数器 + 切点切面
Redis Incr 命令将 key 中储存的数字值增一. 如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. package com.example.apid ...
- Invalid options object. Sass Loader has been initialized using an options obj
https://blog.csdn.net/liwan09/article/details/106981239
- joi
- C#利用折线图分析产品销售走势
图形界面 数据 查询效果 代码 private void button1_Click(object sender, EventArgs e) { G++; DrowFont(this.comboBox ...