uniapp中如何实现swiper两侧的悬浮按钮效果，并且不跟随屏幕视图移动

在UniApp中，Swiper组件默认情况下并不会提供直接的左右滑动按钮，但是你可以通过自定义组件或者利用一些第三方UI库来实现这一功能。以下是步骤：

1. 首先，在项目中引入一个外部插件，如`uni-simple-swiper`，它包含额外的功能比如导航按钮。可以在uni-app的官方市场搜索并安装。

   uni-app market search swiper-with-navigation-buttons

2. 安装完成后，在你的项目中引用这个插件，并按照文档配置Swiper组件，包括添加导航按钮。

<template>
  <view>
    <uni-simple-swiper :options="swiperOptions" @change="onSlideChange">
      <!-- your slides here -->
    </uni-simple-swiper>
    <!-- 悬浮按钮容器 -->
    <view class="swiper-navigation">
      <button class="swiper-button-prev" @click="prevSlide">上一张</button>
      <button class="swiper-button-next" @click="nextSlide">下一张</button>
    </view>
  </view>
</template>

<style scoped>
.swiper-navigation {
  position: absolute;
  bottom: 10px; /* 根据需求调整位置 */
  left: 10px; right: 10px; /* 保持按钮居中，如果需要固定宽度，可以设置宽度 */
}
</style>

<script setup>
import { onMounted } from 'vue';
import UniSimpleSwiper from '@components/UI/SimpleSwiper'; // 自定义简单Swiper组件路径

const swiperOptions = {
  ...// 初始化Swiper选项
};

let slideIndex = 0;

async function initSwiper() {
  const swiper = new UniSimpleSwiper();
  onMounted(() => {
    swiper.init();
  });
}

function prevSlide() {
  if (slideIndex > 0) {
    slideIndex--;
    swiper.slideTo(slideIndex);
  }
}

function nextSlide() {
  if (slideIndex < swiper.slides.length - 1) {
    slideIndex++;
    swiper.slideTo(slideIndex);
  }
}

onMounted(initSwiper);
</script>