• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序动态设置scroll-view的高度问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

众所周知,小程序不能像jQuery一样去操作dom元素来获得元素的高度,给的wx.createSelectorQuery()方法还是一个异步的方法,如果两个套起来的话我做过测试,会一直循环,而我要做的页面是这样的

 

header区域和按钮区域都是要动态获取的,因为虽然设置了rpx的高度,但是!!!,当你取出来用屏幕高度去*2再减去这两个区域的高度*2的时候,获得的高度是不对的!不信的同学自己去试试,百分百页面还有滚动条!

所以要换一种做法,我的页面header是个自定义插件,所以header的高度在自定义组件中获取到,然后发送到父元素,然后再使用wx.createSelectorQuery方法获取到按钮区域的高度,再用屏幕高度一减,获得的高度就对了。代码我给贴一下

header自定义组件的js

  ready(){
    const query = this.createSelectorQuery()
    query.select(\'.header\').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec((res)=>{
      // console.log(res[0].height)
      let a = res[0].height
      this.triggerEvent(\'getHeader\',a)
    })
  },

页面的wxml

<header title="库存查询" blcShow="{{true}}" bindgetHeader="getHeaderHeight"></header>
<scroll-view scroll-y class="scroll" style="height:{{scrollHeight}}px" lower-threshold="{{30}}" bindscrolltolower="nextPage">
 

页面的js

getHeaderHeight(e){
    let headerHeight = e.detail
    let a = wx.getSystemInfoSync()
    a = a.windowHeight
    const query = wx.createSelectorQuery()
    query.select(\'.filter-wrap\').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(res=>{
      let b = a - headerHeight - (res[0].height)
      console.log(a,headerHeight,res[0].height,b)
      this.setData({scrollHeight:b})
    })
  },

设置的scrollHeight就是一个正确的高度

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap