html 小程序九宫格抽奖,九宫格抽奖跑马灯效果实现--微信小程序

目标

但愿实现一个九宫格跑马灯效果的抽奖功能，但但愿不止局限于固定的样式或效果。考虑作成一个n*n的可自定义某些参数的组件。可自定义某些参数例如：能指定动画效果的，能局部自定义样式的，等等。css

实现

网上有不少样例，实现语言各式各样，react, vue, jquery, 纯js...等等，遗憾的是都是上图上代码，代码里都是各类嵌套的if else, 和不明意义的数字常量。今天想说说实现的思路。前端

既然定义为组件，就要有个接口，有输入输出。一个3*3的九宫格，咱们把九宫格中去除中间的启动按钮以外的方块定义为奖池，抽奖就是从奖池方块列表中选定一个产生，选不中则未中。这里，奖池列表做为组件的输入。vue

而点击抽奖到选定抽中或未中能够前端控制，也能够后端控制，这里咱们考虑是后端控制的状况，也就是点击抽奖须要请求数据，在返回数据中获取抽奖结果。react

而事实上抽奖组件功能比较独立，因此组件的输出，能够根据实际须要，自定义向外传递输出。jquery

布局

首先咱们遇到的就是布局的问题，一个3*3的九宫格，中间的按钮是启动按钮，其余的奖池方块是天然布局呢？仍是按照跑马灯顺序布局？天然布局是指：