以下示例代碼是從一個(gè)項(xiàng)目中截取的關(guān)鍵代碼慧起,已省略一些非必要的樣式代碼
效果圖如下
效果圖
主要用到的代碼為 position: fixed和bottom:0
wxml代碼如下:
<!-- 平行級(jí)元素 -->
<view class="shop">
<view class="cell_name">商品金額</view>
<view class="cell_disc">運(yùn)費(fèi)金額</view>
</view>
<!-- 需要固定的按鈕 -->
<button>評(píng)論</button>
wxss代碼如下:
.shop{
margin-bottom: 120rpx;
}
button{
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;
}
講解代碼:
position: fixed
是主要代碼,設(shè)置按鈕為固定
bottom: 0
意思是固定在底部0的位置磺送,可根據(jù)需要自行調(diào)整合適的位置
margin-bottom: 120rpx
因?yàn)榘粹o的高度設(shè)置為100rpx,所以要把上一個(gè)盒子的樣式設(shè)置為margin-bottom>100rpx估灿,不然會(huì)擋住最下面的控件