当前位置：首页 > news >正文

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

news 2025/8/11 23:48:14

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