更新记录

1.0.0（2022-11-11） 下载此版本

首发

平台兼容性

1.安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如果是通过下载解压方式，只需将其组件包文件夹放到项目目录components中

2.基本用法

在需要添加的页面中写组件<zs-turntable />，按需改变属性即可，参考代码如下

<template>
    <view class="content">
        <zs-turntable ref="zsTurntable" :goods="goods" :duration="5"></zs-turntable>
        <button class="btn" type="default" @click="onStart">抽奖</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                goods:[
                    {
                        image: '../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                        title: '特等奖'
                    },
                    {
                        image: '../../static/b5ff4601d9679f502f8f9e737bdd7049.jpeg',
                        title: '谢谢惠顾'
                    },
                    {
                        image: '../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                        title: '一等奖'
                    },
                    {
                        image: '../../static/b5ff4601d9679f502f8f9e737bdd7049.jpeg',
                        title: '谢谢惠顾'
                    },
                    {
                        image: '../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                        title: '二等奖'
                    },
                    {
                        image: '../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                        title: '三等奖'
                    },
                    {
                        image: '../../static/b5ff4601d9679f502f8f9e737bdd7049.jpeg',
                        title: '谢谢惠顾'
                    },
                ]
            };
        },
        methods: {
            onStart(){
                this.$nextTick(()=>{
                    this.$refs.zsTurntable.onStart({
                        // index: 3,//抽奖概率自己写，传入预定奖品的index
                        success:(res)=>{
                            const good = res.goods[res.index];
                            if (good.title) {
                                if (good.title.indexOf('奖')>=0) this.alert(`🙂恭喜恭喜您!抽到奖品${good.title}.`)
                                else this.alert('🙆很遗憾!未中奖.')
                            }else {
                                this.alert(`🙂恭喜恭喜您!抽到奖品${res.index+1}.`)
                            }
                        }
                    })
                })
            },
            alert(content){
                //...
            }
        }
    }
</script>

3.组件特点

4.组件示例

请使用HBuilderX导入示例，或下载示例项目文件解压运行可查看

5.参与学习

~加入QQ群186736431参与学习交流，欢迎提出需求改进意见！