溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼

發(fā)布時間:2020-10-25 02:35:08 來源:腳本之家 閱讀:489 作者:奮斗年輕人 欄目:web開發(fā)

本章節(jié)主要介紹了如何將操作按鈕懸浮固定在微信小程序底部?操作起來也比較簡單,還不會的朋友一起跟著小編學(xué)習(xí)一下吧,希望對你們有所幫助。

  常見的有加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕。

  以收貨地址為例,將添加地址按鈕懸浮于最底部,這樣再多的地址,也不會被遮擋而看不見。

操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼

  核心代碼如下:

  添加 

/*添加地址按鈕*/
  .address-add {
  position: fixed;
  bottom: 0;
  width: 100%;
  }

  改用position: fixed之后,其中width需要設(shè)置為100%,不然會是一個很窄的按鈕。

操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼

  考慮到按鈕自身占據(jù)46px高度,因此地址列表還需要加上如下樣式 

/
  /*地址列表包裝容器*/
  .address-list {
  margin-bottom: 46px;
  }

  這樣一來最后一個地址點通網(wǎng)絡(luò)的設(shè)為默認,編輯,修改按鈕可以完整顯示出現(xiàn)了。

操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼

總結(jié)

以上所述是小編給大家介紹的操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI