微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
更新時間：2020年10月29日 16:04:13 作者：怎奈你何
這篇文章主要介紹了微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(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;
}
到此這篇關于微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼的文章就介紹到這了,更多相關小程序按鈕固定在底部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)貪吃蛇游戲簡易版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
最近一直在用javascript在做項目 可是做著做著 感覺很多功能代碼都是重復的。2010-05-05
下面小編就為大家?guī)硪黄獪\談js構造函數(shù)的方法與原型prototype。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
在ECharts中,可以通過設置數(shù)據(jù)的順序來控制柱狀圖的排序,本文就介紹了echarts實現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-09-09
想要取得iframe中的元素和js變量值，不能用$(document).ready()方法，而是要用$("#iframeId").load()方法2014-06-06
收集不同瀏覽器的怪癖，對于大家以后的開發(fā)與兼容性問題，有所幫助。2010-07-07
這篇文章主要介紹了JS閉包用法,結合具體實例形式分析了javascript閉包的原理、執(zhí)行步驟與相關操作技巧,需要的朋友可以參考下2017-03-03
組件是一個單獨且可復用的功能模塊的封裝,每個組件，包括如下幾個部分：以組件名稱為標記的開始標簽和結束標簽、組件內(nèi)容、組件屬性、組件屬性值,這篇文章主要給大家介紹了關于uniapp封裝小程序雷達圖組件的相關資料,需要的朋友可以參考下2021-07-07
如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對象)、BOM(瀏覽器對象模型)組成,這篇文章主要給大家介紹了關于如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果的相關資料,需要的朋友可以參考下2021-06-06
uniapp使用mui-player插件播放m3u8/flv視頻流示例代碼
在小程序里播放視頻是很常見的功能,下面這篇文章主要給大家介紹了關于uniapp使用mui-player插件播放m3u8/flv視頻流的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06