vue抽獎組件之九宮格

wenhai.he 發(fā)布于2019-08-30 15:54 / 2117人閱讀

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養(yǎng)成了伸手即來的本領。。?？赡苁浅鲇趹械脑驔]錯，就是因為懶，從未發(fā)表過技術文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。

寫在前面

本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領’。。?？赡苁浅鲇凇畱小脑颍]錯，就是因為懶），從未發(fā)表過技術文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。  
本文所述僅冰山一角，歡迎大家留言寶貴經(jīng)驗~。

1.需求

頁面屬于活動頁面  
a.進入頁面會請求后臺接口，拉取當前用戶抽獎剩余次數(shù)  
b.點擊九宮格開始按鈕，開始轉動，并請求后臺接口
c.接口請求成功，根據(jù)接口返回的停留位置停止轉動
d.可連續(xù)抽獎，直至抽獎次數(shù)為0
大致展示效果如下

2.組件源碼

template部分

script部分
1.接口說明：如果本地localhost啟動，可以用setTimeout模擬post請求
2.函數(shù)說明：
move函數(shù) 為100ms轉動，切最小轉動次數(shù)為12（一圈半，也就是防止接口返回太快，剛開始轉就停止）,當接口返回成功后，記錄當前index及服務器的返回停止位置stopIndex,并執(zhí)行enter函數(shù);
enter函數(shù) 100ms轉動，接受參數(shù)，計算當前index與stopIndex的差值，如果>4，就可以執(zhí)行遞減，===4時；<=4，再次判斷是否>-4（這個判斷是為了計算多轉幾次），執(zhí)行stop函數(shù);
stop函數(shù) 為300ms轉動，只轉4次，然后完成整個流程;
3.對于setInterval，當組件銷毀時，要清除定時器

style部分
關于正方形布局，通過{width:100%;padding-bottom:100%;}實現(xiàn)

@common/js/ajax源碼如下

// https://github.com/axios/axios
const axios = require("axios");


// 超時 15秒
// axios.defaults.timeout = 15000;
// 允許發(fā)送cookie
axios.defaults.withCredentials = true;

/**
 * get請求
 * @param {string} url - 請求的路徑
 * @param {Object} params - 參數(shù)
 * @return {Promise}
 */
export function get(url, params = {}) {
  return axios.get(url, {
    params,
  });
}
/**
 * post請求
 * @param {string} url - 請求的路徑
 * @param {Object} data - 參數(shù)
 * @param {Object} config - 原始配置
 * @return {Promise}
 */
export function post(url, data = {}, config = {}) {
  return axios.post(url, data, config);
}

deepQuery源碼如下

/**
 * 深度查詢 deepQuery({},"a","b","c")
 * @param {any} func 要查詢的對象
 * @return {boolean} true or false
 */
export function deepQuery(obj, ...args) {
  return args.reduce((a, b) => (a ? a[b] : a), obj);
}

3.寫在后面

歡迎各位大佬指正
后續(xù)會分享自定義日歷組件/城市地點選擇組件等等，歡迎大家一起討論學習！

GPU云服務器云服務器 html 九宮格抽獎九宮格九宮格圖九宮格源碼

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/117098.html

vue抽獎組件之九宮格

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養(yǎng)成了伸手即來的本領。。?？赡苁浅鲇趹械脑驔]錯，就是因為懶，從未發(fā)表過技術文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發(fā)表過技...

dendoink 2019-08-23 14:11 評論0 收藏0
vue開發(fā)微信商城項目總結之五--vue實現(xiàn)九宮格抽獎

摘要：根據(jù)產(chǎn)品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單福幣類獎品，直接發(fā)放，可在交易明細中查看優(yōu)惠劵類獎品，交易明細中根據(jù)產(chǎn)品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人...

CoorChice 2019-08-21 16:51 評論0 收藏0
九宮格抽獎--手擼代碼

摘要：總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結一下效果類似與跑馬燈效果，閃動效果先快后慢。總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結一下效果,類似與跑馬燈效果，閃動效果先快后慢。代碼解析如下所示：代碼 0 ...

zhou_you 2019-08-23 13:13 評論0 收藏0
九宮格抽獎--手擼代碼

摘要：總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結一下效果類似與跑馬燈效果，閃動效果先快后慢。總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結一下效果,類似與跑馬燈效果，閃動效果先快后慢。代碼解析如下所示：代碼 0 ...

ChanceWong 2019-08-02 12:00 評論0 收藏0
jQuery實現(xiàn)九宮格抽獎游戲

摘要：九宮格抽獎游戲本項目在鏈接前端布局將未選中的和選中的圖片定位好圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片定位的時候，按照逆時針，這樣，在旋轉的時候，可以容易控制圖片表示選中圖片的樣式?jīng)]有選中圖片的樣式邏輯端九宮格抽獎游戲本項目在github 鏈接前端布局將未選中的和選中的圖片定位好 ...

tracy 2019-08-26 10:35 評論0 收藏0