Vue無限スライド週選択日のコンポーネント
5888 ワード
一番前に書いて・・・
以前、携帯電話端末のプロジェクトをするときは、左右のスライド(週ごとのスライド)で日付プラグインを選択する必要がありましたが、当時このプロジェクトはVueを使用していませんでした.当时は适当なサードパーティプラグインが见つからず、少し时间をかけてオリジナルJavaScriptで书きました.その时、心の中でVueベースのコンポーネントに书きたいと思っていました.この短い时间で暇になりました.この過程で穴に出会って、後で提出します!
まず効果を見る
構想
ユーザの着信日(デフォルト今日は送信されません)に基づいて、前の週を取得し、その週、次の週に対応する日付を配列datesに格納します.
Datasに基づいて毎週対応する日付を生成
各スライドユニットのstyleを生成
次にtouchstart touchend touchmoveイベントを処理します.ここではコードを貼りません.論理を話します. touchstart記録スライド始点位置 touchmoveは、vmにスライド距離付与値を得る.distan.x現在の週transform をリアルタイムで取得 touchend activeIndexの値を変更するには、もちろんactiveIndexの値を変更するには十分ではありません.無限スライドを実現するには、datesを操作してください.datesの最初の要素を左にスライドして削除し、datesの中にpushして来週の対応日を入力します.最後の要素を右にスライドして削除し、ネットワーク配列の前にunshiftして先週対応した日 です.
ピットポイント
このコンポーネントはcss 3のtransitionによってアニメーションを実現するので、最初は3つのスライド要素をcssの中にtransition:transform 0.5 s ease-outと書きました.最後にactiveIndexを変更した後、日付を削除し、配列に要素を追加しなければならないので、datesの変更を引き起こし、Vueがインタフェースを再更新し、アニメーションがまた出てきます.最後に思いついた解決策は、transitionの値を制御する変数isAnimationを導入し、スライドしたときにのみ過剰なアニメーション効果をオンにし、transitionend時間をリスニングしてisAnimation=falseをリセットしてからdatesを更新することです.
使用
props
prop
必須
を選択します.
説明
defaultDate
false
String
指定日、デフォルト今日、YYYY-MM-DD
showYear
false
Boolean
現在の週が属する年月を表示するかどうか、デフォルトfalse
events
名前
説明
コールバックパラメータ
dateClick
クリック日トリガー時間
クリックした日付(YYYY-MM-DD)
最後に
githubアドレス
初めてコミュニティで文章を出して、Vue私もまだ模索中です!書くのが下手なので、皆さんに軽く撮ってください.
転載先:https://juejin.im/post/5b4d82725188251af53dd614
以前、携帯電話端末のプロジェクトをするときは、左右のスライド(週ごとのスライド)で日付プラグインを選択する必要がありましたが、当時このプロジェクトはVueを使用していませんでした.当时は适当なサードパーティプラグインが见つからず、少し时间をかけてオリジナルJavaScriptで书きました.その时、心の中で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イベントを処理します.ここではコードを貼りません.論理を話します.
ピットポイント
このコンポーネントはcss 3のtransitionによってアニメーションを実現するので、最初は3つのスライド要素をcssの中にtransition:transform 0.5 s ease-outと書きました.最後にactiveIndexを変更した後、日付を削除し、配列に要素を追加しなければならないので、datesの変更を引き起こし、Vueがインタフェースを再更新し、アニメーションがまた出てきます.最後に思いついた解決策は、transitionの値を制御する変数isAnimationを導入し、スライドしたときにのみ過剰なアニメーション効果をオンにし、transitionend時間をリスニングしてisAnimation=falseをリセットしてからdatesを更新することです.
使用
import weekSlider from 'v-week-slider'
Vue.use(weekSlider)
<week-slider>week-slider>
props
prop
必須
を選択します.
説明
defaultDate
false
String
指定日、デフォルト今日、YYYY-MM-DD
showYear
false
Boolean
現在の週が属する年月を表示するかどうか、デフォルトfalse
events
名前
説明
コールバックパラメータ
dateClick
クリック日トリガー時間
クリックした日付(YYYY-MM-DD)
最後に
githubアドレス
初めてコミュニティで文章を出して、Vue私もまだ模索中です!書くのが下手なので、皆さんに軽く撮ってください.
転載先:https://juejin.im/post/5b4d82725188251af53dd614