uniapp 小红书 post-note-button 如何实现

在uniapp中如何实现类似小红书的post-note-button功能？我想做一个点击发布笔记的悬浮按钮，需要实现以下效果：

  1. 按钮固定在页面右下角
  2. 点击后弹出发布笔记的界面
  3. 按钮要有动态效果和图标切换 请问应该使用哪些组件和API来实现？有没有现成的插件或示例可以参考？
2 回复

在UniApp中实现类似小红书的发布按钮，可以在页面底部使用position: fixed定位，设置z-index确保悬浮。结合uni.navigateTo跳转到发布页面。示例代码：

<view class="post-btn" @click="goPost">+</view>

.post-btn {
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
  z-index: 999;
}

在 UniApp 中实现类似小红书的发布笔记按钮（post-note-button），可以通过以下步骤实现：

  1. 固定定位按钮：使用 position: fixed 将按钮固定在页面右下角。
  2. 样式设计：圆形按钮，添加阴影和图标，参考小红书风格。
  3. 点击事件：绑定跳转到发布页面的逻辑。

示例代码（Vue 页面部分）：

<template>
  <view class="container">
    <!-- 页面内容 -->
    <view class="content">这里是笔记列表或其他内容</view>
    
    <!-- 发布按钮 -->
    <view class="post-button" @click="handlePost">
      <image src="/static/post-icon.png" class="button-icon"></image>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handlePost() {
      // 跳转到发布页面
      uni.navigateTo({
        url: '/pages/post/post'
      });
    }
  }
}
</script>

<style>
.post-button {
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #ff5a5f, #ff2d55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(255, 45, 85, 0.3);
  z-index: 999;
}

.button-icon {
  width: 60rpx;
  height: 60rpx;
}
</style>

关键点：

  • 使用 fixed 定位确保按钮始终可见
  • 渐变背景色增强视觉效果
  • 添加阴影提升层次感
  • 合理设置 z-index 防止被遮挡

可根据实际需求调整位置、颜色和图标资源。

回到顶部