vue抽獎組件之九宮格

dendoink 發布于2019-08-23 14:11 / 2582人閱讀

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養成了伸手即來的本領。。。可能是出于懶的原因沒錯，就是因為懶，從未發表過技術文章或開發經驗，深感慚愧，故洗心革面，決心分享一些東西。

寫在前面

本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發表過技術文章或開發經驗，深感慚愧，故洗心革面，決心分享一些東西。  
本文所述僅冰山一角，歡迎大家留言寶貴經驗~。

1.需求

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

2.組件源碼

template部分

script部分

1.接口說明：如果本地localhost啟動，可以用setTimeout模擬post請求
2.函數說明：

move函數 為100ms轉動，切最小轉動次數為12（一圈半，也就是防止接口返回太快，剛開始轉就停止）,當接口返回成功后，記錄當前index及服務器的返回停止位置stopIndex,并執行enter函數;
enter函數 100ms轉動，接受參數，計算當前index與stopIndex的差值，如果>4，就可以執行遞減，===4時；<=4，再次判斷是否>-4（這個判斷是為了計算多轉幾次），執行stop函數;
stop函數 為300ms轉動，只轉4次，然后完成整個流程;

3.對于setInterval，當組件銷毀時，要清除定時器

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

@common/js/ajax源碼如下

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


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

/**
 * get請求
 * @param {string} url - 請求的路徑
 * @param {Object} params - 參數
 * @return {Promise}
 */
export function get(url, params = {}) {
  return axios.get(url, {
    params,
  });
}
/**
 * post請求
 * @param {string} url - 請求的路徑
 * @param {Object} data - 參數
 * @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.寫在后面

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100217.html

vue抽獎組件之九宮格

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

wenhai.he 2019-08-30 15:54 評論0 收藏0
vue開發微信商城項目總結之五--vue實現九宮格抽獎

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

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實現九宮格抽獎游戲

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

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