更新记录

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

首发

平台兼容性

uni-app

其他

1.安装方式

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

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

2.基本用法

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

<template>
    <view class="content">
        <zs-slot-machines class="component" ref="zsSlotMachines" :cols="2" :styleCenter="styleCenter" :goods="goods"></zs-slot-machines>
        <view class="" style="text-align: center;">
            <button class="btn" type="default" @click="onStart">抽奖</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                goods:[{
                    image:'../../static/b5ff4601d9679f502f8f9e737bdd7049.jpeg',
                    title:'谢谢回顾'
                },{
                    image:'../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                    title:'特等奖'
                },{
                    title:'再接再厉',
                },{
                    image:'../../static/b5ff4601d9679f502f8f9e737bdd7049.jpeg',
                    title:'谢谢回顾'
                },{
                    image:'../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                    title:'一等奖'
                },{
                    title:'再接再厉',
                },{
                    image:'../../static/e7b2e38c8d66613d1dd869b199031d8e.jpeg',
                    title:'二等奖'
                },{
                    title:'恭喜发财',
                }],
                styleCenter:{
                    padding:'20px 20px 0',
                    background:'url(../../static/compressflag.jpg)',
                    backgroundSize:'cover',
                }
            };
        },
        methods: {
            onStart(){
                this.$nextTick(()=>{
                    this.$refs.zsSlotMachines.onStart({
                        //index:1,//预定抽中奖品index,默认随机
                        success:res=>{
                            // console.log('onStart '+res.index,res)
                            let g = res.grids[res.index];
                            let msg;
                            if(g.title.indexOf('奖')>=0) msg=`🙂恭喜您，中了${g.title}`;
                            else msg=`😔很遗憾，未中奖! \n${g.title}`;
                            uni.showModal({
                                title:'系统提示',
                                content:msg,
                                showCancel:false
                            });
                        }
                    })
                })
            }
        }
    }
</script>

3.组件特点

4.组件示例

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

5.参与学习

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