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

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

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗(yàn)的團(tuán)隊,其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接:做網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

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

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

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

核心代碼如下:

添加 

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

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

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

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

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

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

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

總結(jié)

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

新聞名稱:操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
文章地址:http://muchs.cn/article9/igepoh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計公司、微信公眾號、Google、App設(shè)計品牌網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)