微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼
更新時(shí)間：2020年10月29日 16:04:13 作者：怎奈你何
這篇文章主要介紹了微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
效果圖如下所示：
ps: 懸浮固定在頁(yè)面的底部，并且背景有白色層將頁(yè)面底部文字的顯示遮罩，一面影響顯示觀感。且不受頁(yè)面下拉上提的影響。
wxml代碼如下：
<!--底部按鈕的背景層-->
<view class="baise"></view>
<!--底部按鈕-->
<view class="anniu">
<button formType="submit" class="btn-normal btbdstk" bindtap="resetSalaryBtnClick" >
<view class="bdstk" >
<text >重置條件</text>
</view>
</button>
<button formType="submit" disabled="{{disabled}}" class="btn-normal btbdstk" >
<view class="sqdzk">
<text>確認(rèn)查詢</text>
</view>
</button>
</view>
wxss樣式如下：
/* 底部按鈕 */
.baise{
background:#FFFFFF;
display:flex;
position:fixed;
width:100%;
height:150rpx;
z-index:665;
bottom:0rpx;
}
.anniu{
display:flex;
position:fixed;
width:95%;
z-index:666;
bottom:55rpx;
}
.btbdstk{
margin-left:30rpx;
width:50%;
}
.bdstk{
font-size:30rpx;
color:#ffffff;
width:100%;
border:2rpx solid #ffffff;
border-radius:15rpx;
background:#78B8FD;
height: 95rpx;
text-align: center;
line-height:95rpx;
}
.sqdzk{
font-size:30rpx;
color:#ffffff;
width:100%;
border:2rpx solid #ffffff;
border-radius:15rpx;
background:#FF7178;
height: 95rpx;
text-align: center;
line-height:95rpx;
}
到此這篇關(guān)于微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序按鈕固定在底部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)漂亮的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
下面小編就為大家分享一篇解決js ajax同步請(qǐng)求造成瀏覽器假死的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-01-01
利用javascript實(shí)現(xiàn)禁用網(wǎng)頁(yè)上所有文本框,下拉菜單,多行文本域
這篇文章主要介紹了利用javascript實(shí)現(xiàn)禁用網(wǎng)頁(yè)上所有文本框,下拉菜單,多行文本域。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript動(dòng)畫實(shí)例之粒子文本的實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動(dòng)畫實(shí)例之粒子文本的實(shí)現(xiàn)方法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Javascript模板技術(shù)...2007-04-04
JavaScript中的模塊化是指將每個(gè)js文件會(huì)被認(rèn)為單獨(dú)一個(gè)的模塊。模塊之間是互相不可見的。如果一個(gè)模塊需要使用另一個(gè)模塊，那么需要通過指定語(yǔ)法來(lái)引入要使用的模塊，而且只能使用引入模塊所暴露的內(nèi)容2022-11-11
基于微前端qiankun的多頁(yè)簽緩存方案實(shí)踐
這篇文章主要介紹了基于微前端qiankun的多頁(yè)簽緩存方案實(shí)踐,本文對(duì)qiankun框架的使用沒有做太多的發(fā)散總結(jié)，官網(wǎng)和Github上已經(jīng)有很多相關(guān)問題的總結(jié)和踩坑經(jīng)驗(yàn)可供參考，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序計(jì)算器實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了JavaScript?中創(chuàng)建私有成員，下面介紹以?#?作為前綴幾種在?JavaScript?代碼中實(shí)現(xiàn)私有屬性和方法的方式，需要的小伙伴可以參考一下2021-12-12