uni-app项目用俩获取图片位置的轮播图

在uni-app项目中，如果你想创建一个用于显示图片并获取图片位置的轮播图组件，你可以使用内置的`ImagePicker`选择图片功能结合第三方UI库如vant-weapp的`van-swipe`组件实现轮播效果。以下是简单的步骤：

1. **安装依赖**:
首先，你需要安装 vant 的 swipe 组件，可以在 uni-app 的配置文件 `config.json` 中添加 " vant": "^vant-weapp"。

2. **引入组件**:
在需要使用轮播图的地方，导入`van-swipe`和`van-swiper-item`。

import { VanSwipe, VanSwipeItem } from 'vant-weapp';

3. **设置轮播图**:
使用 `VanSwipe` 组件包裹 `VanSwipeItem`，并在数据里保存图片列表和索引。

<template>
  <van-swipe @change="onSlideChange">
    <van-swiper-item v-for="(item, index) in imageList" :key="index">
      <image :src="item.url" :style="{ position: 'absolute', width: '100%', height: '100%' }" @load="getImagePosition(index)" />
    </van-swiper-item>
  </van-swipe>
</template>

<script>
export default {
  data() {
    return {
      imageList: [], // 图片数组
      currentPos: null, // 当前图片的位置
    };
  },
  methods: {
    onSlideChange(index) {
      this.currentPos = index;
    },
    getImagePosition(index) {
      const imgElement = this.$el.querySelector('image'); // 获取当前图片节点
      if (imgElement && imgElement.dataset.position) { // 如果图片有位置信息
        this.currentPos = parseInt(imgElement.dataset.position); // 更新当前位置
      }
    },
  },
};
</script>

4. **获取图片位置**:
在图片加载完成后，你可以从 `data-position` 或者其他自定义属性中读取图片的位置信息。这通常由后端返回或者图片本身包含的信息决定。如果图片没有预设位置，那么可能需要额外处理。