【css】小程序实现view始终跟随页面变化显示在最底部

发表时间：2020-9-23

发布人：葵宇科技

浏览次数：150

【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>{{item.content}}</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;
  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;
}