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