ヌルヌルした横スクロールメニュー。
無限バージョンにしてみた。
メニューをあらかじめてんこ盛り用意しておいて、
疑似無限スクロールにする。
ブラウザサイズによって表示が変わる。
また、 vuetouch.js を インストールしていることが条件。
<style>
.navigation-content {
position: relative;
max-width: 834px;
min-width: 300px;
width: 100%;
-webkit-overflow-scrolling: touch;
color: #b7b7b7 !important;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
list-style: none;
overflow-x: auto;
background: #fff;
}
.navigation a {
display: inline-block;
padding: 5px 15px;
word-break: keep-all;
text-decoration: none;
border-bottom: 1px solid #e5e5e5;
width:150px !important;
background-color: #fff;
}
.navigation-selected {
color: #666 !important;
font-weight: bold !important;
border-bottom: 1px solid black !important;
}
</style>
<template>
<div>
<div class="navigation-content" style="margin: auto !important;">
<nav class="navigation" id="yokonavi">
<a :disabled="loading" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">ああイン順</a>
<a :disabled="loading" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">いいイン順</a>
<a :disabled="loading" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">ううイン順</a>
<a :disabled="loading" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">ええイン順</a>
<a :disabled="loading" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">おおイン順</a>
<a :disabled="loading" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">ききイン順</a>
<!--ブラウザのサイズによって、メニュー数を変更するか-->
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">ほげほげ順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">いいイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">ううイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">ええイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">おおイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">ききイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">んあイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">んいイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">んうイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">んえイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">んおイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">んきイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">ああイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">いいイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">ううイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">ええイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">おおイン順</a>
<a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">ききイン順</a>
</nav>
</div>
<div v-touch:swipe.left="leftSwipe" v-touch:swipe.right="rightSwipe" style="height: 200px;background-color:red;">
ここをスワイプ
</div>
</div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';
import {MixInfinit} from './MixInfinit'
Vue.use(InfiniteLoading, {
slots: {
noMore: 'すべて読み込みました', // you can pass a string value
noResults: '', // you can pass a string value
},
});
export default {
components: {InfiniteLoading},
mixins:[MixInfinit],
data () {
return {
width: window.innerWidth,
height: window.innerHeight,
displayMode:'',
data:{
x:0,
y:0,
px:0,
py:0,
width:0,
harf_width:0,
screen_width:0,
scroll_x:0,
scroll_now_x:0,
yokonavi_width:0
},
selectedTab:1,
loading:false,
};
},
methods: {
handleResize() {
// resizeのたびにこいつが発火するので、ここでやりたいことをやる
this.width = window.innerWidth;
this.height = window.innerHeight;
if(this.width > 834){
this.displayMode = 'none';
} else {
this.displayMode = '';
}
},
leftSwipe(){
// alert("左にスワイプされました");
if(this.selectedTab != 5){
this.selectedTab = this.selectedTab+1;
} else {
this.selectedTab = 0;
}
},
rightSwipe(){
// alert("右にスワイプされました");
if(this.selectedTab != 0){
this.selectedTab = this.selectedTab-1;
} else {
this.selectedTab = 5;
}
},
tabSelect(data){
this.selectedTab = data;
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
},
created () {
this.selectedTab = 0;
this.handleResize();
},
watch: {
selectedTab(newVal,oldVal) {
var targetElement = document.getElementById("yokonavi");
var clientRect = targetElement.getBoundingClientRect() ;
let seed = 444;
let screen_harf_width = window.parent.screen.width/2;
let minus_seed = screen_harf_width - 207;
let waku_seed = this.selectedTab*100;
targetElement.scrollLeft = seed-minus_seed+waku_seed;
}
},
}
</script>
コピペで動くよ。