微信小程式懸浮按鈕
阿新 • • 發佈:2019-01-03
在微信小程式開發過程中,我們一般會使用到類似android一樣的佈局,在頁面的右下方固定一個懸浮。那麼下面就簡單講解下如何具體的實現。
先上下效果圖,這邊可以看到右下方有個固定的懸浮按鈕。設定一下圖片的位置就可以實現這個效果了。
//wxss程式碼
.add_icon{
position:fixed;
width:42px;
height:42px;
bottom:30px;
right:20px;
}
//wxml程式碼
<viewbindtap='adddetial'>
<imageclass="add_icon"src="../../image/addicon.png"></image>
</view>
//JS程式碼
adddetial: function () {
wx.navigateTo({
url: '../adddetial/adddetial',
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
},
好了,到這邊就基本完成了,主要是一個position的設定哦!
Tip:實際專案中使用建議使用rpx代替px,1px大約是2rpx~
公眾號:
公眾號:
簡書:
公眾號: