更新记录

v1.0.0（2025-05-28） 下载此版本

简单的九宫格抽奖组件，用户可自定义用户获得奖品，基础旋转圈数，平滑减速，最小旋转速度，最大旋转速度，加速度，旋转方向，PC 端和小程序均可使用。

平台兼容性

uni-app

其他

wd-sudoku

简单的九宫格抽奖组件，用户可自定义用户获得奖品，基础旋转圈数，平滑减速，最小旋转速度，最大旋转速度，加速度，旋转方向，PC 端和小程序均可使用。

wd-sudoku 组件属性

prizeList 数据

[
    {
        id: 1,
        name: "谢谢惠顾",
        image: "xxx.png"
    },
    {
        id: 2,
        name: "100元",
        image: "xxx.png"
    },
    {
        id: 3,
        name: "谢谢惠顾",
        image: "xxx.png"
    },
    {
        id: 6,
        name: "300元",
        image: "xxx.png"
    },
    { id: 0, name: "立即参与" },
    {
        id: 4,
        name: "200元",
        image: "xxx.png"
    },
    {
        id: 9,
        name: "谢谢惠顾",
        image: "xxx.png"
    },
    {
        id: 8,
        name: "400元",
        image: "xxx.png"
    },
    {
        id: 7,
        name: "谢谢惠顾",
        image: "xxx.png"
    }
]

示例

<wdSudoku :prizeList="prizeList" @startLottery="startLottery" @showResult="showResult">
        <template #button>
            <view class="center-btn">立即参与</view>
        </template>
        <template #item="{ item, index, currentIndex }">
            <view
                class="grid-item"
                :class="{
                    active: currentIndex === index
                }">
                <image :src="item?.image" class="prize-image" />
                <text class="prize-name">{{ item?.name }}</text>
            </view>
        </template>
</wdSudoku>

//开始抽奖
const startLottery = (callback) => {
    callback(8)
}

//显示结果
const showResult = (item) => {
    uni.showToast({
        title: `恭喜获得${item.name}`,
        icon: "none"
    })
}