Taro/微信小程序 底部按钮固定布局

布局

 <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;
    }
  }
}