欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

【css】小程序實現(xiàn)view始終跟隨頁面變化顯示在最底部 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

【css】小程序實現(xiàn)view始終跟隨頁面變化顯示在最底部

發(fā)表時間：2020-9-23

發(fā)布人：葵宇科技

瀏覽次數(shù)：189

【css】微信小程序/支付寶小程序實現(xiàn)view始終跟隨頁面變化顯示在最底部

需求：在小程序開發(fā)過程中，通常需要在首頁或者重要的頁面底部加上技術(shù)支持等字語。那么如何在[頁面內(nèi)容小于頁面高度時]、[頁面內(nèi)容大于頁面高度時]顯示該字語在頁面底部呢？

實現(xiàn)效果的重點樣式：

// 這是技術(shù)支持等字語外邊的盒子，這三個屬性很重要
.main .main-content{
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

// 這是技術(shù)支持等字語重要樣式
.main-content .content-bottom{
  position: absolute;
  bottom: 0;
}

注意點：一定一定是包著‘技術(shù)支持’的大盒子樣式里設(shè)置上邊三個屬性。

好啦~下面上代碼、效果圖…

// 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;
}
//技術(shù)支持等字語外邊的盒子【重要】
.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;
}
//技術(shù)支持等字語樣式【重要】
.main-content .content-bottom{
  width: 100%;
  height: 60rpx;
  text-align: center;
  letter-spacing: 4rpx;
  position: absolute;
  bottom: 0;
}