您好,登錄后才能下訂單哦!
今天小編給大家分享一下微信小程序uniapp怎么添加懸浮菜單的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在項(xiàng)目中可能會有一些頁面需要加一個懸浮按鈕,提供一些額外的菜單
本項(xiàng)目通過uniapp來演示如何將一個按鈕懸浮在頁面右下角
有需要的話需要把view標(biāo)簽替換成div
效果:
想直接看全部代碼不想看各種逼逼叨叨的請直接翻到最下邊。。
通過menushow來控制顯示內(nèi)容,顯示菜單時按鈕文字變?yōu)椤彪[藏“
<view class="floatbtn" @click="changeMenu"> <text v-if="!menushow"> 菜單 </text> <text v-if="menushow"> 隱藏 </text> </view>
1.1. 按鈕樣式
核心是通過position將控件修改為絕對定位,然后通過width、height、light、bottom控制組件大小及位置
.floatbtn { background-color: #007AFF; color: #fff; width: 30rpx; height: 30rpx; position: fixed; right: 0; bottom: 0; z-index: 99999; border-radius: 120rpx 0rpx 0 0rpx; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; padding: 15rpx; }
1.2. 按鈕事件
這里就比較簡單, 點(diǎn)擊按鈕時直接修改menushow就可以了
changeMenu() { this.menushow = !this.menushow },
菜單由menushow控制顯示 并且增加mask作為遮罩層 ,點(diǎn)擊遮罩層隱藏菜單項(xiàng)
<view v-if="menushow" class="menuarea"> //顯示菜單時的遮罩層 , 點(diǎn)擊除了菜單外的遮罩層關(guān)閉菜單顯示 <view class="mask" @click="changeMenu"> </view> <view class="menulist"> <view class="" @click="m1"> 菜單1 </view> <view class="" @click="m2"> 菜單2 </view> <view class="" @click="m3"> 菜單3 </view> </view> </view>
2.1 菜單樣式
.menuarea { width: 100%; height: 100%; } .mask { position: fixed; width: 100%; height: 100%; z-index: 88888; background-color: #3B414433; } .menulist { position: fixed; right: 0; bottom: 130rpx; width: 40vw; height: 300rpx; z-index: 99999; background-color: #fff; display: flex; flex-direction: column; justify-content: space-around; } .menulist view { padding-left: 20rpx; border-bottom: 1px solid #88888833; height: 100rpx; line-height: 100rpx; }
菜單事件
changeMenu() { this.menushow = !this.menushow },
<template> <view> <view class="floatbtn" @click="changeMenu"> <text v-if="!menushow"> 菜單 </text> <text v-if="menushow"> 隱藏 </text> </view> <view v-if="menushow" class="menuarea"> <view class="mask" @click="changeMenu"> </view> <view class="menulist"> <view class="" @click="m1"> 菜單1 </view> <view class="" @click="m2"> 菜單2 </view> <view class="" @click="m3"> 菜單3 </view> </view> </view> </view> </template> <script> export default { onLoad(options) { }, data() { return { menushow: false, } }, methods: { changeMenu() { this.menushow = !this.menushow }, m1(){ console.log('點(diǎn)擊了m1') }, m2(){ console.log('點(diǎn)擊了m2') }, m3(){ console.log('點(diǎn)擊了m3') } } } </script> <style> .floatbtn { background-color: #007AFF; color: #fff; width: 100rpx; height: 100rpx; position: fixed; right: 0; bottom: 0; z-index: 99999; border-radius: 120rpx 0rpx 0 0rpx; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; padding: 15rpx; } .menuarea { width: 100%; height: 100%; } .mask { position: fixed; width: 100%; height: 100%; z-index: 88888; background-color: #3B414433; } .menulist { position: fixed; right: 0; bottom: 130rpx; width: 40vw; height: 300rpx; z-index: 99999; background-color: #fff; display: flex; flex-direction: column; justify-content: space-around; } .menulist view { padding-left: 20rpx; border-bottom: 1px solid #88888833; height: 100rpx; line-height: 100rpx; } </style>
以上就是“微信小程序uniapp怎么添加懸浮菜單”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。