更新记录

1.0.0（2025-10-16） 下载此版本

1.支持自定义样式 2.支持缩放 3.支持返回角度，速度百分比

平台兼容性

uni-app(3.6.10)

其他

插件介绍

在需要使用的界面直接使用 ` 即可，需要多个多次引入即可，方便快捷，支持自定义样式。

使用方法

1. 基本使用，使用 <ccm-lp></ccm-lp>

2. 自定义样式，使用 <ccm-lp :LpStyle='LpStyle'></ccm-lp>

自定义 LpStyle 参数

3. 回调用法，使用 <ccm-lp @onchange="onchange"></ccm-lp>

返回参数

案例教程

1.下载安装本插件

2.在新页面中使用 <ccm-lp></ccm-lp>

3.页面代码

<template>
    <view>
        <view class="textBox">

            <view class="tips">
                轮盘样式：<view>{{LpStyle}}</view>
            </view>
            <view class="tips">
                方块位置：<view>{{blockStyle}}</view>
            </view>
            <view class="tips">
                轮盘返回值：<view>{{LpData}}</view>
            </view>
            <view class="tips">
                移动方向：<view>{{toDir}}</view>
            </view>

            <view class="box" :style="{
                'top': blockStyle.top + 'px',
                'left': blockStyle.left + 'px'
            }"></view>
        </view>
        <ccm-lp @onchange="lpchange" :LpStyle="LpStyle"></ccm-lp>
    </view>
</template>

<script>
    export default {
        data() {
            // 获取系统信息并缓存
            const systemInfo = uni.getSystemInfoSync();
            return {
                //每帧移动多少像素
                step: 2,

                //测试参数，方块位置
                blockStyle: {
                    top: 200,
                    left: 150
                },

                // 缓存窗口尺寸
                windowWidth: systemInfo.windowWidth,
                windowHeight: systemInfo.windowHeight,

                //方向转换 角度范围转为方向
                dir: {
                    up: [180, 360],
                    down: [0, 180],
                    left: [90, 270],
                    right: [270, 90]
                },

                //方块确定往哪个方向移动
                toDir: {
                    up: false,
                    down: false,
                    left: false,
                    right: false
                },

                //轮盘返回数据
                LpData: {},

                //组件自定义样式
                LpStyle: {
                    scale: 1,
                    bottom: "50px",
                    left: "(100% - 150px)/2",
                    viewZindex: 999,
                    viewBgColor: "rgba(0, 0, 0, 0.1)",
                    viewBoxShadowColor: "rgba(0, 0, 0, 0.2)",
                    btnBgColor: "rgba(0, 0, 0, 0.7)",
                    btnBoxShadowColor: "rgba(0, 0, 0, 0.5)"
                },

                // 动画帧ID
                animationId: null
            }
        },
        onLoad() {
            // 使用requestAnimationFrame代替setInterval以获得更流畅的动画
            this.moveBlock();
        },
        beforeUnmount() {
            // 清理动画帧，防止内存泄漏
            if (this.animationId) {
                cancelAnimationFrame(this.animationId);
            }
        },
        methods: {

            lpchange(res) {
                this.LpData = res;
                // 移除生产环境不必要的日志
                // console.log(res.angle);
                //容错
                const bb = 10;
                this.toDir.up = res.angle > this.dir.up[0] + bb && res.angle < this.dir.up[1] - bb;
                this.toDir.down = res.angle > this.dir.down[0] + bb && res.angle < this.dir.down[1] - bb;
                this.toDir.left = res.angle > this.dir.left[0] + bb && res.angle < this.dir.left[1] - bb;
                this.toDir.right = (res.angle > this.dir.right[0] + bb && res.angle < 360) || (res.angle < this.dir.right[
                        1] - bb &&
                    res.angle > 0);
                // console.log(JSON.stringify(this.toDir));
            },
            moveBlock() {
                // 使用requestAnimationFrame实现流畅动画
                if (this.toDir.up && this.blockStyle.top > 0) {
                    this.blockStyle.top -= this.step;
                }
                if (this.toDir.down && this.blockStyle.top < (this.windowHeight - 50)) {
                    this.blockStyle.top += this.step;
                }
                if (this.toDir.left && this.blockStyle.left > 0) {
                    this.blockStyle.left -= this.step;
                }
                if (this.toDir.right && this.blockStyle.left < (this.windowWidth - 50)) {
                    this.blockStyle.left += this.step;
                }

                this.animationId = requestAnimationFrame(() => this.moveBlock());
            }
        },
    }
</script>

<style lang="scss" scoped>
    .textBox {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;

        .tips {
            margin: 10px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.1);
            display: flex;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .box {
            width: 50px;
            height: 50px;
            background-color: #60f;
            position: absolute;
        }
    }
</style>

有问题或者交流请：