页面滚动,按钮在最底部,同时去除垂直滚动条
效果图
<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>
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。