页面滚动,按钮在最底部,同时去除垂直滚动条

效果图

在这里插入图片描述

<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>
posted @ 2021-03-25 12:41  何人陪我共长生  阅读(51)  评论(0编辑  收藏  举报