<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>