v-for
で表示した要素をクリックすると、クリックした要素の位置まで表示位置を変更したく、調べて作りました。
v-for
で表示するときに v-bind:id="['list_item_' + index]"
として連番のid名を付与して、クリックしたときに clickScroll
メソッドで位置を変更するようにしました。
JavaScriptもVue.jsも初学者で上記の方法しか思いつきませんでした。
みなさんは他の方法でやってるんですか?もっとスマートやる方法もありますか?
ご存知の方、教えてくださいm(__)m
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> </head> <style> .list { width: 800px; display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; border-left: 1px solid #ccc; padding: 0; margin: 0; box-sizing: border-box; } .list_item { width: 33.333%; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; list-style: none; padding: 100px 30px; margin: 0; box-sizing: border-box; } </style> <body> <div id="app"> <ul class="list"> <li class="list_item" v-bind:id="['list_item_' + index]" v-for="(item, index) in items" v-on:click="clickScroll(index)"> {{ item.title }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { items: [ { title: 'タイトル:あああああああああ' }, { title: 'タイトル:いいいいいいいいいい' }, { title: 'タイトル:ううううううううう' }, { title: 'タイトル:えええええええ' }, { title: 'タイトル:おおおおおお' }, { title: 'タイトル:かかかかかかかかかか' }, { title: 'タイトル:きききききききききき' }, { title: 'タイトル:くくくくくくくく' }, { title: 'タイトル:けけけけけけけ' }, { title: 'タイトル:ここここここここ' }, { title: 'タイトル:さささささささ' }, { title: 'タイトル:しししししし' }, { title: 'タイトル:すすすすす' }, { title: 'タイトル:せせせせ' }, { title: 'タイトル:そそそそ' }, { title: 'タイトル:たたたた' } ], targetElement: '', clientRect: '', y: '' }, methods: { clickScroll: function(index) { this.targetElement = document.getElementById("list_item_" + index); this.clientRect = this.targetElement.getBoundingClientRect(); this.y = this.clientRect.top; window.scrollTo(0, window.pageYOffset + this.clientRect.top); console.log(window.pageYOffset + this.clientRect.top); } } }); </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/29 13:50