Taro/微信小程序 底部按钮固定布局
2020-12-28 本文已影响0人
逸笛
图片.png
布局
<View className='tgyDetailPage'>
<ScrollView
className='container'
scrollY
>
列表内容
</ScrollView>
<View className='contributionBtn' >
<Image
className='contributionIcon'
src={require("../../assets/tgy/contribution.png")}
></Image>
立即投稿
</View>
</View>
样式
.tgyDetailPage {
width: 100%;
height: 100vh;
overflow: auto;
border-top: solid 1px #eeeeee;
padding-top: 1px;
background: #f8f9fd;
.container {
height: calc(100vh - 150px);//使用calc计算属性:页面总高度100vh-按钮所占高度150
}
//按钮固定
.contributionBtn {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 682px;
height: 96px;
.rowDouleCenter;
background: url("../../assets/tgy/detailBtnBg.png") no-repeat;
background-size: 100% 100%;
color: #ffffff;
font-size: 24px;
.contributionIcon {
width: 45px;
height: 43px;
margin-right: 8px;
}
}
}