按鈕懸浮固定在微信小程式底部

2021-08-31 15:47:49 字數 382 閱讀 3971

常見的有加入購物車按鈕、結算按鈕、收貨列表新增位址按鈕。

以收貨位址為例,將新增位址按鈕懸浮於最底部,這樣再多的位址,也不會被遮擋而看不見。

核心**如下:

新增/*新增位址按鈕*/

.address-add {

position: fixed;

bottom: 0;

width: 100%;

改用position: fixed之後,其中width需要設定為100%,不然會是乙個很窄的按鈕。

考慮到按鈕自身佔據46px高度,因此位址列表還需要加上如下樣式

/*位址列表包裝容器*/

.address-list {

margin-bottom: 46px;

複製**

如何將操作按鈕懸浮固定在微信小程式底部?

常見的有加入購物車按鈕 結算按鈕 收貨列表新增位址按鈕。以收貨位址為例,將新增位址按鈕懸浮於最底部,這樣再多的位址,也不會被遮擋而看不見。核心 如下 新增 新增位址按鈕 address add 改用position fixed之後,其中width需要設定為100 不然會是乙個很窄的按鈕。考慮到按鈕自...

微信小程式學習之路(三) 懸浮客服按鈕

我寫的懸浮按鈕,是參考官網文件,並稍加修改得到的 廢話不多,看 movable area 是movable view 可移動的區域,如果需要新增內容,比如展示資訊之類的,可以放在movable view標籤的前面。且,page的height 設定為auto。js部分 獲取應用例項 page tap ...

微信小程式底部導航

tabbar 複製 配置的引數 tabbar 指底部的 導航配置屬性 color 未選擇時 底部導航文字的顏色 selectedcolor 選擇時 底部導航文字的顏色 borderstyle 底部導航邊框的樣色 注意 這裡如果沒有寫入樣式 會導致 導航框上邊框會出現預設的淺灰色線條 list 導航配...