小程序页面之 悬浮标样式

效果图

wxml 中

// 第一种，使用 navigator  跳转页面

<view class="round-click">
  <navigator url='/pages/addimages/addimages' >发布</navigator >
</view>


// 第2种，使用 bindtap 跳转

<view class="round-click">
  <view data-type="{{currentIndex}}" class="fabuimg" bindtap='tofabu'>发布</view>
</view>

wxss

/* 悬浮框样式 */

.round-click{
    height: 120rpx;
    width: 120rpx;
    /* background-color: #d92a2a; */
    
	background-color: #2ad9c2;
    border-radius: 100%;
    position: fixed;
    bottom: 150rpx;
    right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}
.round-click navigator{
    font-size: 32rpx;
    max-width: 80rpx;
    color: #fff;
    text-align: center;
}
.round-click view{
    font-size: 32rpx;
    max-width: 80rpx;
    color: #fff;
    text-align: center;
}

js 实例

//跳转到  发布页

tofabu: (event) => {
    let type = event.currentTarget.dataset.type;
    var id = event.currentTarget.dataset.id;
    let url;

    if (type == "0") {
      url = "/pages/xiangmu/fabu/fabu?type="+ type;
    } else if (type == "1") {
      url = "/pages/xiangmu/fabu/fabu?type=" + type;
    } else if (type == "2"){
      url = "/pages/xiangmu/fabu/jsfabu/jsfabu?type=" + type;
    }
    console.log(url);
    wx.navigateTo({
      url: url,
    })
},