效果图
<template>
<view class="page-demo">
<view class="srcool-box">
<scroll-view scroll-y="true" class="cont-scrool">
<view class="demo-height"
v-for="(item,index) in listTypecont" :key="index">
{{ item.name }}
</view>
</scroll-view>
</view>
<view class="bottom">
确认按钮
</view>
</view>
</template>
<script>
export default {
data() {
return {
listTypecont:[
{name:"司藤"},
{name:"三生三世十里桃花"},
{name:"宸汐缘"},
{name:"半妖司藤"},
{name:"百岁之约,一言为定"},
{name:"全部"},
{name:"司藤1"},
{name:"三生三世十里桃花2"},
{name:"宸汐缘3"},
{name:"半妖司藤4"},
{name:"百岁之约,一言为定5"},
{name:"全部6"},
{name:"半妖司藤7"},
{name:"百岁之约,一言为定8"},
{name:"全部9"},
],
};
},
}
</script>
<style>
/* 让页面中的子元素垂直方向上排列 */
.page-demo{
display: flex;
flex-direction: column;
width: 100%;
/* 去除滚动条*/
height: 100vh;
overflow-y: auto;
/* */
}
/* 去除滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
/* scroll-view 的父级元素自动铺满整个屏幕 */
.srcool-box{
flex: 1;
}
/*让滚动中的子元素显示完整 */
.cont-scrool{
margin-bottom:100rpx;
}
.demo-height{
height: 100rpx;
text-align: center;
line-height: 100rpx;
vertical-align: middle;
background-color: red;
border-bottom: 1px solid #ccc;
}
.bottom{
position: fixed;
bottom: 0;
height: 100rpx;
width: 100%;
background: blue;
text-align: center;
}
</style>