uniapp中如何实现swiper两侧的悬浮按钮效果，且不跟随屏幕视图移动，不使用第三方库

在 UniApp 中，你可以通过原生组件结合 CSS 实现一个简单的 Swiper 滑动组件，并添加固定位置的悬浮按钮。以下是一个基本步骤：

1. 首先，引入 Swiper 组件到你的页面：

<view class="swiper-container">
  <!-- 这里将添加你的 Swiper 相关内容 -->
</view>

2. 创建 Swiper 的内容块和按钮元素：

<view class="swiper-wrapper">
  <block wx:for="{{ items }}" wx:key="*this">
    <!-- 你的 Swiper 卡片内容 -->
  </block>
</view>

<!-- 左侧按钮 -->
<button fixed="" class="swiper-button-prev" @click="prevSlide">上一张</button>

<!-- 右侧按钮 -->
<button fixed="" class="swiper-button-next" @click="nextSlide">下一张</button>

3. 添加样式，确保按钮浮动在页面顶部或底部：

.swiper-container {
  position: relative;
  width: 100%;
  height: 500px; /* 根据需求设置高度 */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%; /* 你可以调整这个值以适应需要的位置 */
  transform: translateY(-50%);
  z-index: 100; /* 确保按钮在其他元素之上 */
}

/* 样式可以根据设计定制，比如圆角、边距等 */
.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

4. 在 Vue 的数据绑定和方法中处理滑动逻辑：

export default {
  data() {
    return {
      items: [], // 定义你的卡片列表
      swiperOption: {}, // 初始化 Swiper 的配置项
    };
  },
  methods: {
    prevSlide() {
      this.$refs.mySwiper.prev();
    },
    nextSlide() {
      this.$refs.mySwiper.next();
    }
  },
  created() {
    this.initSwiper();
  },
  mounted() {
    this.mySwiper = new Swiper('.swiper-container', this.swiperOption);
  },
  beforeDestroy() {
    this.mySwiper.destroy(); // 清除组件，释放资源
  },
  methods: {
    initSwiper() {
      // 基于你的需求配置 Swiper 的选项
      this.swiperOption = {
        // ... 其他配置项如 autoplay, loop 等
      };
    },
  },
};