操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
更新時(shí)間：2019年08月02日 14:05:04 作者：奮斗年輕人
在一些購物平臺經(jīng)常需要將商品加入購物車，像加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕都是按鈕懸浮底部的，怎么實(shí)現(xiàn)這樣的功能呢？下面小編給大家?guī)砹瞬僮靼粹o懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼，一起看看吧
本章節(jié)主要介紹了如何將操作按鈕懸浮固定在微信小程序底部?操作起來也比較簡單，還不會的朋友一起跟著小編學(xué)習(xí)一下吧，希望對你們有所幫助。
常見的有加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕。
以收貨地址為例，將添加地址按鈕懸浮于最底部，這樣再多的地址，也不會被遮擋而看不見。
核心代碼如下：
添加
/*添加地址按鈕*/
.address-add {
position: fixed;
bottom: 0;
width: 100%;
}
改用position: fixed之后，其中width需要設(shè)置為100%，不然會是一個(gè)很窄的按鈕。
考慮到按鈕自身占據(jù)46px高度，因此地址列表還需要加上如下樣式
/
/*地址列表包裝容器*/
.address-list {
margin-bottom: 46px;
}
這樣一來最后一個(gè)地址點(diǎn)通網(wǎng)絡(luò)的設(shè)為默認(rèn)，編輯，修改按鈕可以完整顯示出現(xiàn)了。
總結(jié)
以上所述是小編給大家介紹的操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
javascript文件夾選擇框的兩種解決方案 怎么都有缺陷啊。不過更傾向于第一種2009-07-07
JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
這篇文章主要介紹了JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了JavaScript前端結(jié)合HTML5實(shí)現(xiàn)post文件上傳與進(jìn)度條顯示相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了原生js+css實(shí)現(xiàn)tab切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
使用weixin-java-miniapp配置進(jìn)行單個(gè)小程序的配置詳解
這篇文章主要介紹了使用weixin-java-miniapp配置進(jìn)行單個(gè)小程序的配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
微信小程序登錄時(shí)如何獲取input框中的內(nèi)容
這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方案
當(dāng)鍵盤彈出后，頁腳也被頂起來；而當(dāng)搜索完（要刷新整體頁面），鍵盤縮回后，iframe里 鍵盤當(dāng)住的地方變成白色。怎么解決這個(gè)問題呢？下面腳本之家小編給大家分享微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方案，一起看看吧2017-09-09
在你的網(wǎng)頁中嵌入外部網(wǎng)頁的方法...2007-04-04
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)類似一個(gè)表格。接下來通過本文給大家介紹Bootstrap網(wǎng)格基礎(chǔ)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
簡單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡單了解Javscript中兄弟ifream的方法調(diào)用文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
JavaScript簡單編程實(shí)例學(xué)習(xí)
在本篇文章里小編給大家整理的是關(guān)于JavaScript簡單編程實(shí)例學(xué)習(xí)內(nèi)容，有興趣的朋友們可以參考下。2020-02-02