【css】⼩程序实现view始终跟随页⾯变化显⽰在最底部
【css】⼩程序/⽀付宝⼩程序 实现view始终跟随页⾯变化显⽰在最底部
需求：在⼩程序开发过程中，通常需要在⾸页或者重要的页⾯底部加上技术⽀持等字语。那么如何在[页⾯内容⼩于页⾯⾼度时]、[页⾯内容⼤于页⾯⾼度时]显⽰该字语在页⾯底部呢？
实现效果的重点样式：
// 这是技术⽀持等字语外边的盒⼦，这三个属性很重要
.main .main-content{
position: relative;
min-height: 100vh;
box-sizing: border-box;
}
// 这是技术⽀持等字语重要样式
.main-content .content-bottom{
position: absolute;
bottom: 0;
}
注意点：⼀定⼀定是包着‘技术⽀持’的⼤盒⼦样式⾥设置上边三个属性。
好啦~下⾯上代码、效果图…
// wxml
<view class="main">
<view class="main-content">
<view class="content-box" wx:for="{{couponList}}" wx:key="index">
<text>{{item.title}}</text>
<text>{{t}}</text>
</view>
<view class="content-bottom">古夋科技</view>
</view>
</view>
//  wxss
page{
background: #f5f5f5;
}
//技术⽀持等字语外边的盒⼦【重要】.main .main-content{
position: relative;
min-height:100vh;
box-sizing: border-box;
padding-bottom:60rpx;
padding-top:30rpx;
}
.main-content .content-box {
height:250rpx;
width:90%;
margin:0 auto 30rpx;
display: flex;
flex-direction: column;box sizing
align-items: center;
justify-content: center;
background: #fff;
border-radius:20rpx;
color: #38b5f8;
}
//技术⽀持等字语样式【重要】
.main-content .content-bottom{
width:100%;
height:60rpx;
text-align: center;
letter-spacing:4rpx;
position: absolute;
bottom:0;
}
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。