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

采用 uniapp 实现的一款圆形滚盘示例组件模板, 支持 vue2、vue3,适配H5、微信小程序(其他小程序未试过,可自行尝试)

代码实现简约易懂,用户可根据自身需求下载模板,并进行扩展开发

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

  • 示例

props 属性

options

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

js 复制代码
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

js 复制代码
circleRadius: {
  type: Number,
  default: 150,
},

circleCenter

圆盘圆心坐标,单位rpx

js 复制代码
circleCenter: {
  type: Number,
  default: 200,
},

imageSize

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

js 复制代码
imageSize: {
  type: Number,
  default: 60,
},

speed

旋转速度,单位ms

js 复制代码
speed: {
  type: Number,
  default: 1,
},

使用示例

vue2 使用示例

javascript 复制代码
<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 使用示例

javascript 复制代码
<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>
相关推荐
Hy行者勇哥19 分钟前
前端代码结构详解
前端
练习时长一年40 分钟前
Spring代理的特点
java·前端·spring
水星记_1 小时前
时间轴组件开发:实现灵活的时间范围选择
前端·vue
2501_930124702 小时前
Linux之Shell编程(三)流程控制
linux·前端·chrome
潘小安2 小时前
『译』React useEffect:早知道这些调试技巧就好了
前端·react.js·面试
@大迁世界2 小时前
告别 React 中丑陋的导入路径,借助 Vite 的魔法
前端·javascript·react.js·前端框架·ecmascript
EndingCoder2 小时前
Electron Fiddle:快速实验与原型开发
前端·javascript·electron·前端框架
EndingCoder2 小时前
Electron 进程模型:主进程与渲染进程详解
前端·javascript·electron·前端框架
Nicholas683 小时前
flutter滚动视图之ScrollNotificationObserve源码解析(十)
前端
@菜菜_达3 小时前
CSS scale函数详解
前端·css