uni-app 图片前后对比插件

在uni-app中实现图片前后对比插件，你可以利用Vue.js的组件化特性来构建这个功能。以下是一个基本的实现示例，包括一个自定义组件ImageCompare，它允许用户通过滑动来对比两张图片。

首先，创建一个新的Vue组件ImageCompare.vue：

<template>
  <view class="compare-container">
    <view class="compare-slider" :style="{ left: sliderPosition + 'px' }">
      <image class="compare-image" :src="beforeImage" mode="aspectFill"></image>
    </view>
    <image class="compare-image" :src="afterImage" mode="aspectFill" style="position: absolute; top: 0; left: 0;"></image>
    <slider @change="onSliderChange" :min="0" :max="sliderMax" show-stops="false"></slider>
  </view>
</template>

<script>
export default {
  props: {
    beforeImage: {
      type: String,
      required: true
    },
    afterImage: {
      type: String,
      required: true
    },
    containerWidth: {
      type: Number,
      default: 375 // 默认宽度，可以根据实际情况调整
    }
  },
  data() {
    return {
      sliderPosition: 0,
      sliderMax: this.containerWidth
    };
  },
  methods: {
    onSliderChange(e) {
      this.sliderPosition = e.detail.value;
    }
  }
};
</script>

<style scoped>
.compare-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.compare-slider {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  transition: left 0.3s ease;
}
.compare-image {
  width: 100%;
  height: 100%;
}
slider {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}
</style>

然后在你的页面中使用这个组件：

<template>
  <view>
    <ImageCompare
      beforeImage="/static/before.jpg"
      afterImage="/static/after.jpg"
      :containerWidth="375"
    ></ImageCompare>
  </view>
</template>

<script>
import ImageCompare from '@/components/ImageCompare.vue';

export default {
  components: {
    ImageCompare
  }
};
</script>

这个实现中，ImageCompare组件接收两张图片的URL（beforeImage和afterImage），并允许用户通过滑动条来查看两张图片的对比。滑动条的值决定了覆盖在afterImage上的beforeImage的可见部分。

请注意，这个示例是一个基本的实现，可能需要根据实际项目的需求进行调整，比如处理不同屏幕尺寸的适配问题，或者添加更多的交互效果。