<template>
<div class="cart">
<van-button type="primary" @click="clickBtn">主要按钮</van-button>
<van-popup
v-model="show"
position="bottom"
:style="{ height: '80%' }"
get-container="body"
ref="container"
>
<template>
<div style="overflow-y: unset; " class="popup-wrapper">
<div class="title" style="background-color: #fff;">题目</div>
<div style="height: calc(100vh - 200px)">
<ul >
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>2222222</li>
</ul>
</div>
<div style="position: fixed; bottom: 0;">
<button>重置</button>
<button>确定</button>
</div>
</div>
</template>
</van-popup>
</div>
</template>
<script>
import Vue from 'vue';
import { Popup, Button, Sticky } from 'vant';
Vue.use(Button);
Vue.use(Popup);
Vue.use(Sticky);
export default {
name: "Cart",
data() {
return {
show: false,
container: null
}
},
mounted() {
this.container = this.$refs.container;
},
methods: {
clickBtn() {
this.show = true;
}
}
}
</script>
<style>
.popup-wrapper .title {
width: 100%;
height: 56px;
line-height: 56px;
position: sticky;
top: 0;
left: 0;
}
</style>
