vue获取当前窗口的高度赋值给class或者id

<template>
  <main class="scroll-content" id="act-scroll">
    <div id="aa" class="swipe-wrapper">
      <cube-scroll  ref="contentScroll">
        <cube-swipe  @item-click="onItemClick"
          @btn-click="onBtnClick" :data="swipeData"></cube-swipe>
      </cube-scroll>
    </div>
  </main>
</template>

mounted() {
    console.log(document.body.clientHeight)
    var h = document.documentElement.clientHeight || document.body.clientHeight
   // var m = document.getElementById('act-scroll')
    var a = document.getElementById('aa')
    a.style.height = h - 68 + 'px'  //减去顶部高度
    a.style.height = document.body.clientHeight + 'px'
    this.$refs.contentScroll.refresh() 
  },
<template>
  <main class="scroll-content" id="act-scroll">
    <div id="aa" class="swipe-wrapper">
      <cube-scroll  ref="contentScroll">
        <cube-swipe  @item-click="onItemClick"
          @btn-click="onBtnClick" :data="swipeData"></cube-swipe>
      </cube-scroll>
    </div>
  </main>
</template>

<script type="text/ecmascript-6">
// import CubePage from '../demo/cube-page.vue'

export default {
  data() {
    return {
      swipeData: [
        {
          item: {
            text: '测试1',
            value: 1
          }
        },
        {
          item: {
            text: '测试1',
            value: 2
          }
        },
        {
          item: {
            text: '测试1',
            value: 3
          }
        },
        {
          item: {
            text: '测试1',
            value: 4
          }
        },
        {
          item: {
            text: '测试1',
            value: 5
          }
        },
        {
          item: {
            text: '测试1',
            value: 6
          }
        },
        {
          item: {
            text: '测试1',
            value: 7
          }
        },
        {
          item: {
            text: '测试1',
            value: 8
          }
        },
        {
          item: {
            text: '测试1',
            value: 9
          }
        },
        {
          item: {
            text: '测试1',
            value: 10
          }
        },
        {
          item: {
            text: '测试11',
            value: 11
          }
        },
        {
          item: {
            text: '测试12',
            value: 12
          }
        },
        {
          item: {
            text: '测试13',
            value: 13
          }
        },
        {
          item: {
            text: '测试14',
            value: 14
          }
        },
        {
          item: {
            text: '测试15',
            value: 15
          }
        },
        {
          item: {
            text: '测试16',
            value: 16
          }
        },
        {
          item: {
            text: '测试17',
            value: 17
          }
        },
        {
          item: {
            text: '测试18',
            value: 18
          }
        },
        {
          item: {
            text: '测试19',
            value: 19
          }
        },
        {
          item: {
            text: '测试20',
            value: 20
          }
        },
        {
          item: {
            text: '测试21',
            value: 21
          }
        },
        {
          item: {
            text: '测试22',
            value: 22
          }
        }
      ]
    }
  },
  mounted() {
    console.log(document.body.clientHeight)
    // var h = document.documentElement.clientHeight || document.body.clientHeight
    var m = document.getElementById('act-scroll')

    var a = document.getElementById('aa')
    // a.style.height = h - 68 + 'px'
    a.style.height = document.body.clientHeight + 'px'
    this.$refs.contentScroll.refresh()
  },
  methods: {
    onItemClick(item) {
      console.log('click item:', item)
    },
    onBtnClick(btn, index) {

    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.scroll-content {

}
.swipe-wrapper{
  // height 2000px;
  // padding: 10px 10px 0px 10px;
  border: 1px solid red;
}
</style>

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/88786944