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>
相关推荐
Code季风1 小时前
Gin 框架中的模板引擎使用指南
服务器·前端·gin
前端开发大师3 小时前
详细讲解-uniapp封装request请求
uni-app
芥子沫7 小时前
VSCode添加Python、Java注释技巧、模板
开发语言·前端·javascript
cos8 小时前
FE Bits 前端周周谈 Vol.2|V8 提速 JSON.stringify 2x,Vite 周下载首超 Webpack
前端·javascript·css
YuShiYue8 小时前
【uni-app】解决在 h5 环境下会出现双标题问题
uni-app
wfsm9 小时前
pdf预览Vue-PDF-Embed
前端
wangbing11259 小时前
界面规范的其他框架实现-列表-layui实现
前端·javascript·layui
Hurry69 小时前
web应用服务器tomcat
java·前端·tomcat
烛阴10 小时前
Sin -- 重复的、流动的波浪
前端·webgl