Vue實(shí)現(xiàn)無限滑動(dòng)周選擇日期的組件代碼?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:國際域名空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、調(diào)兵山網(wǎng)站維護(hù)、網(wǎng)站推廣。
思路
根據(jù)用戶傳入日期(不傳默認(rèn)今天),獲取上一周,當(dāng)周,下一周對(duì)應(yīng)的日期放數(shù)組dates里
let vm = this this.dates.push( { date: moment(vm.defaultDate).subtract(7, 'd').format('YYYY-MM-DD'), }, { date: vm.defaultDate, }, { date: moment(vm.defaultDate).add(7, 'd').format('YYYY-MM-DD'), } )
根據(jù)datas 生成每一周對(duì)應(yīng)的日期
getDaies (date) { let vm = this, arr = [] let weekOfDate = Number(moment(date).format('E')) let weeks = ['日', '一', '二', '三', '四', '五', '六'] let today = moment() let defaultDay = moment(vm.defaultDate) for (var i = 0; i < 7; i++) { let _theDate = moment(date).subtract(weekOfDate - i, 'd') arr.push({ date: _theDate.format('YYYY-MM-DD'), week: weeks[i], isToday: _theDate.format('YYYY-MM-DD') === today.format('YYYY-MM-DD'), isDay: _theDate.format('E') === defaultDay.format('E') }) } return arr }
生成每一個(gè)滑動(dòng)單元的style
getTransform (index) { let vm = this let style = {} if (index === vm.activeIndex) { style['transform'] = 'translateX('+ vm.distan.x +'px)' } if (index < vm.activeIndex) { style['transform'] = 'translateX(-100%)' } if (index > vm.activeIndex) { style['transform'] = 'translateX(100%)' } style['transition'] = vm.isAnimation ? 'transform 0.5s ease-out' : 'transform 0s ease-out' return style }
然后就是處理touchstart touchend touchmove事件了,這里就不貼代碼了,說下邏輯:
ouchstart 記錄滑動(dòng)起點(diǎn)位置
touchmove 獲得滑動(dòng)距離賦值給 vm.distan.x 實(shí)時(shí)獲得當(dāng)前周transform
touchend 改變activeIndex的值,當(dāng)然改變activeIndex的值是不夠的,要實(shí)現(xiàn)無限滑動(dòng),就要在操作一下dates,如果是左滑刪除dates的第一個(gè)元素并且往dates里面push下下周對(duì)應(yīng)日期,如果是右滑刪除最后一個(gè)元素并網(wǎng)數(shù)組前面unshift上上周對(duì)應(yīng)的日期
關(guān)于Vue實(shí)現(xiàn)無限滑動(dòng)周選擇日期的組件代碼問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
網(wǎng)站題目:Vue實(shí)現(xiàn)無限滑動(dòng)周選擇日期的組件代碼
文章來源:http://muchs.cn/article42/ighsec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站營銷、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)