微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
更新時間：2020年10月29日 16:04:13 作者：怎奈你何
這篇文章主要介紹了微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼,代碼簡單易懂，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖如下所示：
ps: 懸浮固定在頁面的底部，并且背景有白色層將頁面底部文字的顯示遮罩，一面影響顯示觀感。且不受頁面下拉上提的影響。
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>確認查詢</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ū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序按鈕固定在底部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)漂亮的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
下面小編就為大家分享一篇解決js ajax同步請求造成瀏覽器假死的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
利用javascript實現(xiàn)禁用網(wǎng)頁上所有文本框,下拉菜單,多行文本域
這篇文章主要介紹了利用javascript實現(xiàn)禁用網(wǎng)頁上所有文本框,下拉菜單,多行文本域。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-07-07
Javascript模板技術(shù)...2007-04-04
JavaScript中的模塊化是指將每個js文件會被認為單獨一個的模塊。模塊之間是互相不可見的。如果一個模塊需要使用另一個模塊，那么需要通過指定語法來引入要使用的模塊，而且只能使用引入模塊所暴露的內(nèi)容2022-11-11
這篇文章主要介紹了基于微前端qiankun的多頁簽緩存方案實踐,本文對qiankun框架的使用沒有做太多的發(fā)散總結(jié)，官網(wǎng)和Github上已經(jīng)有很多相關(guān)問題的總結(jié)和踩坑經(jīng)驗可供參考，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了微信小程序計算器實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了JavaScript?中創(chuàng)建私有成員，下面介紹以?#?作為前綴幾種在?JavaScript?代碼中實現(xiàn)私有屬性和方法的方式，需要的小伙伴可以參考一下2021-12-12