小程序 获取页面滚动的高度

news/2024/7/20 3:33:22 标签: 小程序, 监听滚动
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
}).exec()

主要使用了wx.createSelectorQuery() 来获取节点元素的信息,然后onPageScroll()来监听页面滚动
html部分:

<view class='savePic1 {{savePic1Status}}' bindtap='savePic'>保存图片</view>

<view class='savePic2' bindtap='savePic'>保存图片</view>

js部分:

//页面滚动一定高度隐藏浮动按钮

onPageScroll:function(e){

var query = wx.createSelectorQuery();

query.select('.savePic2').boundingClientRect((rect) => {

let top = rect.top;

console.info('按钮距离顶部位置', top)

if (top <= 700) { //临界值,根据自己的需求来调整

this.setData({

savePic1Status: 'hide', //是否固定导航栏

})

} else {

this.setData({

savePic1Status: 'show',

})

}

}).exec()

}


http://www.niftyadmin.cn/n/797845.html

相关文章

IO流学习(一)

1.Java Io流的概念&#xff0c;分类&#xff0c;类图。 1.1 Java Io流的概念java的io是实现输入和输出的基础&#xff0c;可以方便的实现数据的输入和输出操作。在java中把不同的输入/输出源&#xff08;键盘&#xff0c;文件&#xff0c;网络连接等&#xff09;抽象表述为“流…

翻牌动画

效果如下(可兼容移动端)&#xff1a; css部分&#xff1a; <style type"text/css"> *, *:before, *:after { box-sizing: border-box; } html { font-size: 18px; line-height: 1.5; font-weight: 300; color: #333; font-family: "Nunito …

ios系统input光标错位

如图&#xff1a; 当浮层是固定定位fixed的时候&#xff0c;ios系统上&#xff0c;input输入框的光标会有错位现象&#xff0c;如上图 目前找到的解决方法是将fixed改为absolute定位。

小程序canvas画虚线圆

效果&#xff1a; 封装&#xff1a; /** * 画虚线园 * cxt_arc 画布 * thex 画的x坐标 * they 画的y坐标 * raduis 圆半径 * space 虚线的间隔 默认值 2 * Math.PI / 100 即一百空白点 */ drawDashCircle: function (cxt_arc, thex, they, raduis, space) { space s…

小程序富文本WxParse插件

参考https://blog.csdn.net/loveyoulouyou/article/details/83413628 下载WxParse插件&#xff0c;插件地址https://github.com/icindy/wxParse css部分&#xff1a; import "../../utils/wxParse/wxParse.wxss"; html部分&#xff1a; <import src"../…

layui根据条件修改表格固定行的颜色

当按钮样式存在 “noedit”时&#xff0c;该行变灰色 var data{ table :{ id:userlist-table, options:{ done:function(res,curr,count){ res.data.forEach(function (item, index) { …

关于js中location.href的用法

window.location.href"、"location.href"是本页面跳转 parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转举例说明&#xff1a;如果A,B,C,D都是jsp&#xff0c;D是C的iframe&#xff0c;C是B的iframe&#xff0c;B是…

小程序实现标尺滑动

效果图&#xff1a; html部分&#xff1a; <!--pages/test-rules/test-rules.wxml--> <view> <view class"ageCon"> <view class"title">年龄</view> <view class"ageOut"> <view class"hr&q…