微信小程序页面添加悬浮窗

一，实现效果图

 

二、实验代码

test1.wxml代码

test1.wxml
<view class="post-container">
    <image class="addArticle" src="../../static/add.png" bindtap="navigateToTarget">add</image>
  </view>

test1.wxss代码

test1.wxss
.post-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 10rpx;
  bottom: 30rpx;
  z-index: 100;
  width: 120prx;
  height: 120prx;
}

.addArticle {
  width: 80rpx;
  height: 80rpx;
  position: relative;
  z-index: 110;
}

test1.js

test1.js
const app = getApp();
Page({
data:{
},

navigateToTarget: function () {
  wx.navigateTo({
    url: '/pages/myProject/myProject',/*这个url为点击之后跳转的页面，可以自定义*/
  })
},
})