采用 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>