依然是基于微博语法开发，使用时请注意标签替换

优化了滑动的效果，默认的索引，滑动距离等，

使用方式和以前一样没变，主要修改了组件内部

javascript"><template>
  <wbx-view class="" style="width: 100vw;height: 70vh;">
    <wbx-view style="margin-top: 100px; margin-left: 100px;margin-bottom: 20px;">
    <WBXswiper  @change="gaibian" :vertical="false"  :current="5" indicatorActiveColor="#fff" indicatorColor="#c0c0c0" :originalData="items"   style="width: 200px;height: 200px;border-radius: 20px;">
       <template slot="swiperItem" slot-scope="scope">
			    <wbx-image :src="scope.item.src" mode="scaleToFill" style="width:200px; height: 200px;" />
       </template>
    </WBXswiper>
    </wbx-view>
	</wbx-view>
</template>

<script>
/**
 * @type WBXAppOption
 */
import WBXswiper from "../../commpents/WBXswiper/index.vue";
const pageOptions = {
  data() {
    return {
      items: [{
            src: 'res/001.jpg',
            txt:222222
		  },
          {
            src: 'res/001.jpg',
            txt:222222
		  },{
            src: 'res/001.jpg',
            txt:222222
		  },{
            src: 'res/001.jpg',
            txt:222222
		  },{
            src: 'res/001.jpg',
            txt:222222
		  }],
      current:0
     }
  },
  computed:{
  },
  methods: {
    gaibian(e){
    },
    add(index){
      this.current=index
    }
  },
  components: {
    WBXswiper,
  },
  wbox: {
    onLoad() { },
    onShow() {
      // 页面显示/切入前台时触发
    },
    onHide() {
      // 页面隐藏时触发
    },
    onUnload() {
      // 页面退出时触发
    },
  },
  mounted() { },
};
export default pageOptions;
</script>

<style></style>

已下是组件内部

javascript"><template>
    <wbx-view
      ref="objStyle"
      :style="wrapperStyle"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <wbx-view
        class="carousel-wrapper"
        :style="carouselStyle"
        @transitionend="onTransitionEnd"
        ref="carouselWrapper"
      >
        <wbx-view :style="itemStyle">
          <slot name="swiperItem" :item="originalData[originalData.length - 1]"></slot>
        </wbx-view>
        <wbx-view v-for="(item, index) in originalData" :key="index" :style="itemStyle">
          <slot name="swiperItem" :item="item"></slot>
        </wbx-view>
        <wbx-view :style="itemStyle">
          <slot name="swiperItem" :item="originalData[0]"></slot>
        </wbx-view>
      </wbx-view>
      <wbx-view v-if="indicatorDots" :style="{ width: containerWidth + 'px' }" style="position: absolute; bottom: 10px; display: flex; flex-direction: row; justify-content: center;">
        <wbx-view
          v-for="(item, index) in originalData"
          :key="index"
          :style="{ backgroundColor: index === realIndex ? indicatorActiveColor : indicatorColor }"
          style="width: 10px; height: 10px; margin: 0 5px; cursor: pointer; border-radius: 10px;"
          @click~stop="setCurrentIndex(index)"
        ></wbx-view>
      </wbx-view>
    </wbx-view>
  </template>
  
  <script>
  /*
  originalData          数据
  autoPlay              是否自动播放
  interval              自动播放间隔时间
  indicatorDots         是否显示指示点
  indicatorColor        指示点颜色
  indicatorActiveColor  当前选中的指示点颜色
  current               当前所在滑块的index
  vertical              滑动方向是否为纵向
  @change               轮播图改变时会触发 change 事件，返回当前索引值
  */
  export default {
    props: {
      originalData: {
        type: Array,
        required: true
      },
      autoPlay: {
        type: Boolean,
        default: false
      },
      interval: {
        type: Number,
        default: 3000
      },
      indicatorDots: {
        type: Boolean,
        default: true
      },
      indicatorColor: {
        type: String,
        default: '#c0c0c0'
      },
      indicatorActiveColor: {
        type: String,
        default: '#fff'
      },
      current: {
        type: String,
        default: ''
      },
      vertical: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        currentIndex: 1,
        timer: null,
        startX: 0,
        startY: 0,
        offset: 0,
        isTransitioning: false,
        containerWidth: 0,
        containerHeight: 0,
        userCurrent:false,
        userCurrentStare:false,

      };
    },
    watch: {
      current: {
          handler(newVal) {
            this.userCurrent=true
            this.setCurrentIndex(newVal);
          },
          immediate: true
      }
    },
    computed: {
      wrapperStyle() {
        return {
          position: "relative",
          width: `${this.wrapperWidth}px`,
          height: `${this.wrapperHeight}px`,
        };
      },
      carouselStyle() {
        const baseTranslateValue = -this.currentIndex * (this.vertical ? this.containerHeight : this.containerWidth);
        const translateValue = baseTranslateValue + this.offset;
        return {
          display: 'flex',
          flexDirection: this.vertical ? 'column' : 'row',
          transform: this.vertical ? `translateY(${translateValue}px)` : `translateX(${translateValue}px)`,
          transition: this.isTransitioning ? 'transform 0.3s ease-out' : 'none',
           width: !this.vertical ? `${this.wrapperWidth}px` : `${this.containerWidth}px`,
          height: this.vertical ? `${this.wrapperHeight}px` : `${this.containerWidth}px`
        };
      },
      wrapperWidth() {
        return this.containerWidth * (this.originalData.length + 2);
      },
      wrapperHeight() {
        return this.containerHeight * (this.originalData.length + 2);
      },
      itemStyle() {
        return {
          width: !this.vertical ? `${this.containerWidth}px` : `${this.containerWidth}px`,
          height: this.vertical ? `${this.containerHeight}px` : `${this.containerWidth}px`,
          flexShrink: 0
        };
      },
      realIndex() {
        return (this.currentIndex - 1 + this.originalData.length) % this.originalData.length;
      }
    },
    mounted() {
      this.updateDimensions();
      this.$nextTick(() => {
        if (this.autoPlay) {
          this.startAutoPlay();
        }
      });
    },
    beforeDestroy() {
      this.stopAutoPlay();
    },
    methods: {
      updateDimensions() {
        if (this.$refs.objStyle) {
          const objStyle =  this.$refs.objStyle.styleObject
          this.containerWidth = parseFloat(objStyle.width);
          this.containerHeight = parseFloat(objStyle.height);
        }
      },
      startAutoPlay() {
        this.timer = setInterval(() => {
          this.next();
        }, this.interval);
      },
      stopAutoPlay() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      next() {
        this.offset = 0;
        this.isTransitioning = true;
        this.currentIndex += 1;
        this.$emit('change', { current: this.currentIndex });
      },
      prev() {
        this.offset = 0;
        this.isTransitioning = true;
        this.currentIndex -= 1;
        this.$emit('change', { current: this.currentIndex });
      },
      setCurrentIndex(index) {
        this.stopAutoPlay();
        if (this.current !== '') {
          // 传值情况
          this.userCurrentStare = this.userCurrent ? true : !this.userCurrentStare;
        } else {
          // 不传值情况
          this.userCurrentStare = index !== '';
        }
        this.currentIndex = index + 1;
        if (this.autoPlay) {
          this.startAutoPlay();
        }
      },
      onTouchStart(e) {
        this.startX = e.touches[0].clientX;
        this.startY = e.touches[0].clientY;
        this.offset = 0;
        this.stopAutoPlay();
      },
      onTouchMove(e) {
        const moveX = e.touches[0].clientX;
        const moveY = e.touches[0].clientY;
        if(this.vertical){
          if(moveY - this.startY>=this.containerHeight){
            this.offset=this.containerHeight
          }else if(moveY - this.startY<= -this.containerHeight){
            this.offset=-this.containerHeight
          }else{
            this.offset= moveY - this.startY;
          }
        }else{
          if(moveX - this.startX>=this.containerWidth){
            this.offset=this.containerWidth
          }else if(moveX - this.startX<= -this.containerWidth){
            this.offset=-this.containerWidth
          }else{
            this.offset= moveX - this.startX;
          }
        }
      },
      onTouchEnd() {
        this.isTransitioning = true;
        if (Math.abs(this.offset) > (this.vertical ? this.containerHeight : this.containerWidth) /6) {
          if (this.offset > 0) {
            this.prev();
          } else {
            this.next();
          }
        } else {
          this.offset = 0;
        }
        if (this.autoPlay) {
          this.startAutoPlay();
        }
      },
      onTransitionEnd() {
        this.isTransitioning = false;
        this.offset = 0;
        if (this.currentIndex === this.originalData.length + 1) {
          this.currentIndex = 1;
        }
        if (this.currentIndex === 0) {
          this.currentIndex = this.originalData.length;
        }
      }
    }
  };
  </script>
  
  <style>
  </style>