您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue實現無限滑動周選擇日期的組件代碼怎么寫”,在日常操作中,相信很多人在Vue實現無限滑動周選擇日期的組件代碼怎么寫問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue實現無限滑動周選擇日期的組件代碼怎么寫”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
思路
根據用戶傳入日期(不傳默認今天),獲取上一周,當周,下一周對應的日期放數組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'), } )
根據datas 生成每一周對應的日期
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 }
生成每一個滑動單元的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 記錄滑動起點位置
touchmove 獲得滑動距離賦值給 vm.distan.x 實時獲得當前周transform
touchend 改變activeIndex的值,當然改變activeIndex的值是不夠的,要實現無限滑動,就要在操作一下dates,如果是左滑刪除dates的第一個元素并且往dates里面push下下周對應日期,如果是右滑刪除最后一個元素并網數組前面unshift上上周對應的日期
到此,關于“Vue實現無限滑動周選擇日期的組件代碼怎么寫”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。