zoukankan      html  css  js  c++  java
  • 小程序动态设置scroll-view的高度问题

    众所周知,小程序不能像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就是一个正确的高度

  • 相关阅读:
    CSUST 8.4 早训
    CSUST 8.5 早训
    hdu1542 Atlantis 线段树--扫描线求面积并
    hdu1540 Tunnel Warfare 线段树/树状数组
    hdu1535 Invitation Cards 最短路
    hdu1358 Period KMP
    SQL Server 向数据库中创建表并添加数据
    初次实践数据库--SQL Server2016
    hdu1301 Jungle Roads 最小生成树
    hdu1281 棋盘游戏 二分图最大匹配
  • 原文地址:https://www.cnblogs.com/dayin1/p/13188267.html
Copyright © 2011-2022 走看看