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

没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来

想要做的效果是  很常见的滚动条超出某个元素时,该元素固定在顶部

网上看到的获取滚动条高度及返回顶部的代码

onPageScroll:function(e){ // 获取滚动条当前位置
    console.log(e)
},
goTop: function (e) {  // 一键回到顶部
 if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: ‘提示‘,
      content: ‘当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。‘
    })
  }
}  

在api上实在找不到在没有任何触发情况下获取view在视图中的位置  只能退而求其次,当点击元素时会获取到当前元素的所有信息,其中的detail.y就是在Y轴上的位置

代码如下:

<view class=‘tab-con‘ bindtap="getTabScrollTop">
    <view class="tab {{tabFixed ? ‘tab-fixed‘:‘‘}}">
      <view>二月</view>
      <view>三月</view>
      <view>四月</view>
    </view>
  </view>

js代码大概如下

Page({
  data: {
    tabScrollTop: 0,
    tabFixed: false
  },
  getTabScrollTop: function (e) {
    this.setData({
      tabScrollTop: e.detail.y,
    });
  },
  onPageScroll: function (e) { // 获取滚动条当前位置
      if (e.scrollTop > this.data.tabScrollTop) {
        this.setData({
          tabFixed: true
        })
      }else{
        this.setData({
          tabFixed: false
        })
      }
  },
})  

在没有任何点击触发下,还不知道该怎么做

原文地址:https://www.cnblogs.com/Anne3/p/8855173.html

时间: 2024-08-02 17:49:50

小程序页面获取滚动条高度的相关文章

javascript 获取滚动条高度+常用js页面宽度与高度

javascript 获取滚动条高度+常用js页面宽度与高度 js(1)  /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    if(document.documentElement&&document.documentElement.scrollTop)    {        scrollTop=document.documentElem

小程序页面可以放置转发按钮,同时开放了微信运动步数背景音乐播放等更多基础能力

小程序页面可以放置转发按钮,同时开放了微信运动步数背景音乐播放等更多基础能力.小程序转发更简单了:小程序页面可以放置转发按钮.在小程序页面右上角“…”的转发功能基础上,新增在页面内放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体验更加流畅.开发者可以根据小程序的功能,展示最适合的按钮形式. 使用指引 转发按钮,旨在帮助用户更流畅地与好友分享内容和服务.转发,应是用户自发的行为,且在需要时触手可及.开发者在使用时若遵从以下指引,会得到更佳的用户体验. 含义清晰:明确.一目了然的图形按

js,jquery 获取滚动条高度和位置, 元素距顶部距离

一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height();  获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(document).height(); 获取页面的文档宽度:$(document).width(); 获取滚动条到顶部的垂直高度:$(document).scrollTop()或$(window).scrollTop() 获取滚动条到左边的垂直宽度:$(document).scrollLeft()或$(

微信小程序 定位 获取国家省市区

从文档可知该方法只是返回的位置坐标等信息,并未返回地理位置名称.好在腾讯地图准们为小程序提供了接口SDK来获取位置信息. 文档地址如下:http://lbs.qq.com/qqmap_wx_jssdk/index.html SDK使用方法请参照该文档. 在小程序中获取地理位置信息的流程就是: 根据wx.getLocation方法获取当前位置坐标. 根据reverseGeocoder方法获取当前坐标地理位置信息. 注意:会提示https://apis.map.qq.com不是request 合法域

让微信小程序页面之间的通信不在变得困难

一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品,首页数量刷新. 实现方式 方式一:onShow直接请求接口 Page({ onShow() { // ...一些逻辑 // 后端请求新的购物车数量 this.requestCartNum(); } }) 不足: 每次onShow都要请求接口,浪费资源. 方式二:globalData存储购物车数量,

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

微信小程序页面

[转]微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json 微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app.json错误 要在app.json(公共文件中)建立页面跳转page.如下图 不管是跳转到哪个页面,必须在json里的pages数组里面填写路径,不然跳转失败 跳

微信小程序如何获取openid

微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // console.log(res) var appid = 'wxbe08efce713a44bf'; //填写微信小程序appid var secret = 'd65ad3d9ee159c568200c30a3bb49baf'; //填写微信小程序secret //调用request请求api转换登录凭证