小程序页面之 悬浮标样式

小程序页面之 悬浮标样式

效果图

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.pe;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,})
},