微信小程序?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)文章
js實(shí)現(xiàn)貪吃蛇游戲（簡(jiǎn)易版）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲簡(jiǎn)易版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript中SQL語(yǔ)句的應(yīng)用實(shí)現(xiàn)
最近一直在用javascript在做項(xiàng)目 可是做著做著 感覺很多功能代碼都是重復(fù)的。2010-05-05
淺談js構(gòu)造函數(shù)的方法與原型prototype
下面小編就為大家?guī)?lái)一篇淺談js構(gòu)造函數(shù)的方法與原型prototype。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
echarts實(shí)現(xiàn)排名柱狀圖的示例代碼
在ECharts中,可以通過(guò)設(shè)置數(shù)據(jù)的順序來(lái)控制柱狀圖的排序,本文就介紹了echarts實(shí)現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
想要取得iframe中的元素和js變量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法2014-06-06
收集不同瀏覽器的怪癖，對(duì)于大家以后的開發(fā)與兼容性問(wèn)題，有所幫助。2010-07-07
這篇文章主要介紹了JS閉包用法,結(jié)合具體實(shí)例形式分析了javascript閉包的原理、執(zhí)行步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
組件是一個(gè)單獨(dú)且可復(fù)用的功能模塊的封裝,每個(gè)組件，包括如下幾個(gè)部分：以組件名稱為標(biāo)記的開始標(biāo)簽和結(jié)束標(biāo)簽、組件內(nèi)容、組件屬性、組件屬性值,這篇文章主要給大家介紹了關(guān)于uniapp封裝小程序雷達(dá)圖組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
如何使用ES6的class類繼承來(lái)實(shí)現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對(duì)象)、BOM(瀏覽器對(duì)象模型)組成,這篇文章主要給大家介紹了關(guān)于如何使用ES6的class類繼承來(lái)實(shí)現(xiàn)絢麗小球效果的相關(guān)資料,需要的朋友可以參考下2021-06-06
uniapp使用mui-player插件播放m3u8/flv視頻流示例代碼
在小程序里播放視頻是很常見的功能,下面這篇文章主要給大家介紹了關(guān)于uniapp使用mui-player插件播放m3u8/flv視頻流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06