本文介紹九宮格抽獎功能的實現。 1.需求 功能很簡單,來看看高保截圖,如下圖1 圖1 需求的功能點如下: 用戶點擊抽獎,九宮格四周的圖片順時針依次閃爍,空轉幾圈。 請求接口,等接口有返回后最后對應的獎品閃爍,其他獎品不閃爍。 登錄后,正中間的抽獎這個小方格點亮,未登錄是灰色 ...
一 頁面布局 默認九宮格圖 九宮格占位圖 HTML頁面代碼: 二 頁面樣式 九宮格布局相關CSS頁面樣式: 三 代碼邏輯 Luck幸運抽獎函數方法: 獎品列表DOM拼接: 時間 速度 中獎編號 amp 中獎獎品下標控制: 點擊抽獎實現: ...
2019-11-20 13:54 0 396 推薦指數:
本文介紹九宮格抽獎功能的實現。 1.需求 功能很簡單,來看看高保截圖,如下圖1 圖1 需求的功能點如下: 用戶點擊抽獎,九宮格四周的圖片順時針依次閃爍,空轉幾圈。 請求接口,等接口有返回后最后對應的獎品閃爍,其他獎品不閃爍。 登錄后,正中間的抽獎這個小方格點亮,未登錄是灰色 ...
...
說JQuery封裝的專門用來處理九宮格抽獎的框架JQuery.latest.min.js,文件地址如下 ...
HTML代碼: SCSS樣式: JS代碼: ...
html: <div class="line_item" :class=" index == 1 ? 'active' : 'white_item'"> & ...
上一篇說道大轉盤抽獎,今天來說說九宮格抽獎 實現原理: 1.將獎品按照抽獎轉動的順序通過css去定位 2.通過索引控制一個高亮的類名,來實現跑馬燈的效果 3.一般這種跑馬燈轉動是有速度的轉變效果,先快后慢,最后停止,要實現這個效果,可以在一個定時器 ...
前提准備:scss 和 px2rem-loader 具體可以查看 一、新建抽獎組件 Lottery.vue 1、新components建文件夾lottery,包含src文件夾和index.js,src下面新建抽獎組件 Lottery.vue,lottery.scss index.js ...
老規矩,先上圖 json文件配置 wxml: wxss: js: 擼完收工 ...