亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue抽獎組件之九宮格

dendoink / 2646人閱讀

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

寫在前面 
本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領(lǐng)’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發(fā)表過技術(shù)文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。  
本文所述僅冰山一角，歡迎大家留言寶貴經(jīng)驗~。
1.需求 
頁面屬于活動頁面  
a.進(jìn)入頁面會請求后臺接口，拉取當(dāng)前用戶抽獎剩余次數(shù)  
b.點擊九宮格開始按鈕，開始轉(zhuǎn)動，并請求后臺接口
c.接口請求成功，根據(jù)接口返回的停留位置停止轉(zhuǎn)動
d.可連續(xù)抽獎，直至抽獎次數(shù)為0
大致展示效果如下

2.組件源碼

template部分



script部分


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


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


3.對于setInterval，當(dāng)組件銷毀時，要清除定時器




style部分


關(guān)于正方形布局，通過{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ù)會分享自定義日歷組件/城市地點選擇組件等等，歡迎大家一起討論學(xué)習(xí)！

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100217.html

相關(guān)文章

  • vue抽獎組件之九宮格

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

    wenhai.he 評論0 收藏0

  • vue開發(fā)微信商城項目總結(jié)之五--vue實現(xiàn)九宮格抽獎

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

    CoorChice 評論0 收藏0

  • 九宮格抽獎--手?jǐn)]代碼

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

    zhou_you 評論0 收藏0

  • 九宮格抽獎--手?jǐn)]代碼

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

    ChanceWong 評論0 收藏0

  • jQuery實現(xiàn)九宮格抽獎游戲

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

    tracy 評論0 收藏0

發(fā)表評論

0條評論

dendoink

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<