前端uniapp中点击左右箭头左右滑动效果

要实现在uniapp中点击左右箭头左右滑动效果，你可以使用uni-swiper组件。uni-swiper是一个轮播组件，可以实现左右滑动切换图片、内容等效果。

使用方法如下：

1. 在你的页面中引入uni-swiper组件：

<template>
  <view class="swiper-container">
    <uni-swiper :autoplay="true">
      <uni-swiper-item>
        <image src="/static/img/1.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="/static/img/2.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="/static/img/3.jpg"></image>
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

<script>
  import uniSwiper from '@/components/uni-swiper/uni-swiper.vue'
  import uniSwiperItem from '@/components/uni-swiper/uni-swiper-item.vue'

  export default {
    components: {
      uniSwiper,
      uniSwiperItem
    }
  }
</script>

其中，uni-swiper表示轮播组件，uni-swiper-item表示轮播项，可以在里面放置图片、文字、按钮等内容。

2. 配置uni-swiper组件的属性和事件：

<uni-swiper :autoplay="true" @change="swiperChange">
  <uni-swiper-item>
    <image src="/static/img/1.jpg"></image>
  </uni-swiper-item>
  <uni-swiper-item>
    <image src="/static/img/2.jpg"></image>
  </uni-swiper-item>
  <uni-swiper-item>
    <image src="/static/img/3.jpg"></image>
  </uni-swiper-item>
</uni-swiper>

其中，autoplay表示是否自动轮播（默认为false），change表示轮播切换时触发的事件。

3. 在页面中添加样式：

.swiper-container {
  height: 200rpx;
  overflow: hidden;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.swiper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样，你就可以在uniapp中实现点击左右箭头左右滑动效果了。