Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge about how to add floating menu to WeChat Mini Programs uniapp. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

There may be pages in the project that need to add a hover button to provide some additional menus

This project demonstrates how to hover a button in the lower right corner of the page through uniapp.

Replace the view tag with div if necessary

Effect:

If you want to see all the code directly, please turn directly to the bottom if you don't want to see all kinds of nagging.

First, draw button

The display is controlled by menushow, and the button text becomes "hidden" when the menu is displayed.

Menu hiding

1.1. Button styl

The core is to modify the control to absolute positioning through position, and then control the size and position of the component through width, height, light, and bottom.

.floatbtn {background-color: # 007AFF; color: # fff; width: 30rpx; height: 30rpx; position: fixed; right: 0; bottom: 0; z-index: 99999; border-radius: 120rpx 0rpx 00rpx; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end Padding: 15rpx;}

1.2. Button event

It's relatively simple here, just modify menushow directly when you click the button.

ChangeMenu () {this.menushow =! this.menushow}, II. Draw menu items

The menu is displayed under the control of menushow and mask is added as the mask layer. Click the mask layer to hide the menu item.

/ / the mask layer when the menu is displayed Click the mask layer except the menu to close the menu to display menu 1 menu 2 Menu 3

2.1 menu Styl

.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;}

Menu event

ChangeMenu () {this.menushow =! this.menushow} Full code menu hidden menu 1 Menu 2 menu 3 export default {onLoad (options) {} Data () {return {menushow: false,}}, methods: {changeMenu () {this.menushow =! this.menushow}, M1 () {console.log ('clicked M1')} M2 () {console.log ('clicked m2')}, m3 () {console.log (' clicked m3')}} .floatbtn {background-color: # 007AFF Color: # fff; width: 100rpx; height: 100rpx; position: fixed; right: 0; bottom: 0; z-index: 99999; border-radius: 120rpx 0rpx 00rpx; 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 } these are all the contents of the article "how to add floating menu to WeChat Mini Programs uniapp". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.