uniapp实现的圆形滚盘组件模板

采用 uniapp 实现的一款圆形滚盘示例组件模板, 支持 vue2、vue3，适配H5、微信小程序（其他小程序未试过，可自行尝试）
代码实现简约易懂，用户可根据自身需求下载模板，并进行扩展开发

可到插件市场下载尝试：https://ext.dcloud.net.cn/plugin?id=24676

• 示例
  

props 属性

options

选项数组，必须具备 image 字段

options: {
  type: Array,
  default: () => [
    { image: "https://randomuser.me/api/portraits/lego/3.jpg" },
    { image: "https://randomuser.me/api/portraits/lego/1.jpg" },
    { image: "https://randomuser.me/api/portraits/lego/2.jpg" },
    { image: "https://randomuser.me/api/portraits/lego/4.jpg" },
    { image: "https://randomuser.me/api/portraits/lego/5.jpg" },
    { image: "https://randomuser.me/api/portraits/lego/6.jpg" },
    { image: "https://randomuser.me/api/portraits/lego/7.jpg" },
  ],
},

circleRadius

圆盘半径，单位rpx

circleRadius: {
  type: Number,
  default: 150,
},

circleCenter

圆盘圆心坐标，单位rpx

circleCenter: {
  type: Number,
  default: 200,
},

imageSize

滚盘元素图片大小，单位rpx

imageSize: {
  type: Number,
  default: 60,
},

speed

旋转速度，单位ms

speed: {
  type: Number,
  default: 1,
},

使用示例

vue2 使用示例

<template>
  <view>
    <view style="padding: 10px">
      <view class="template-title">模板一：</view>
      <view style="width: 400px; height: 300px">
        <DemoTemplate :options="imageList"></DemoTemplate>
      </view>
    </view>
    <view style="padding: 10px">
      <view class="template-title">模板二：</view>
      <view style="width: 400px; height: 300px">
        <DemoTemplate
          :circle-radius="100"
          :circle-center="200"
          :image-size="50"
        ></DemoTemplate>
      </view>
    </view>
  </view>
</template>

<script>
import DemoTemplate from "./components/index.vue";

export default {
  components: {
    DemoTemplate,
  },
  data() {
    return {
      imageList: [
        {
          image: "https://randomuser.me/api/portraits/lego/3.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/1.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/2.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/4.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/5.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/6.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/7.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/8.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/9.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/4.jpg",
        },
        {
          image: "https://randomuser.me/api/portraits/lego/4.jpg",
        },
      ],
    };
  },
};
</script>

<style scoped>
.template-title {
  font-weight: bold;
  font-size: 14px;
}
</style>

vue3 使用示例

<template>
  <view>
    <view style="padding: 10px">
      <view class="template-title">模板一：</view>
      <view style="width: 400px; height: 300px">
        <DemoTemplate :options="imageList"></DemoTemplate>
      </view>
    </view>
    <view style="padding: 10px">
      <view class="template-title">模板二：</view>
      <view style="width: 400px; height: 300px">
        <DemoTemplate
          :circle-radius="100"
          :circle-center="200"
          :image-size="50"
        ></DemoTemplate>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import DemoTemplate from "./components/index.vue";

const imageList = ref([
  { image: "https://randomuser.me/api/portraits/lego/3.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/1.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/2.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/4.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/5.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/6.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/7.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/8.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/9.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/4.jpg" },
  { image: "https://randomuser.me/api/portraits/lego/4.jpg" },
]);
</script>

<style scoped>
.template-title {
  font-weight: bold;
  font-size: 14px;
}
</style>