<template>
<div>
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item" :class="activeNav === index ? 'mui-active' : ''" v-for="(item,index) in navList" v-bind:key="index" @click="changeActive(index)">
{{item}}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
startX: '',
startY: '',
moveEndX: '',
moveEndY: '',
X: '',
Y: '',
muicsroll: undefined,
muislider: undefined,
lastX: 0, //上次所在位置
posX: 0, //最終位置 上次所在位置 + 移動的距離 this.X
navList: [
'推薦',
'熱點',
'北京',
'社會',
'娛樂',
'科技',
'財經',
'體育'
],
activeNav: 0
}
},
mounted: function() {
this.muicsroll = document.getElementsByClassName('mui-scroll')[0]
this.muislider = document.getElementsByClassName('mui-slider')[0]
this.scroll()
},
methods: {
scroll: function() {
this.muicsroll.addEventListener('touchstart',this.touch,false)
this.muicsroll.addEventListener('touchmove',this.touch,false)
this.muicsroll.addEventListener('touchend',this.touch,false)
},
touch: function(ev) {
var ev = ev || window.ev
switch(ev.type){
case 'touchstart':
this.startX = ev.touches[0].pageX
this.startY = ev.touches[0].pageY
break;
case 'touchmove':
this.moveEndX = ev.changedTouches[0].pageX
this.moveEndY = ev.changedTouches[0].pageY
this.X = this.moveEndX - this.startX
this.Y = this.moveEndY - this.startY
if ( Math.abs(this.X) > Math.abs(this.Y) && this.X > 0 ) {
this.posX = this.X + this.lastX
this.muicsroll.style.transform = "translate3d("+this.posX+"px,0px,0px)"
this.muicsroll.style.transitionDuration = "0ms"
this.muicsroll.style.transitionTimingFunction = "cubic-bezier(0.165, 0.84, 0.44, 1)"
}
if ( Math.abs(this.X) > Math.abs(this.Y) && this.X < 0 ) {
this.posX = this.X + this.lastX
this.muicsroll.style.transform = "translate3d("+this.posX+"px,0px,0px)"
this.muicsroll.style.transitionDuration = "0ms"
this.muicsroll.style.transitionTimingFunction = "cubic-bezier(0.165, 0.84, 0.44, 1)"
}
break;
case 'touchend':
this.lastX = this.posX
if(this.posX > 0) {
this.muicsroll.style.transitionDuration = "500ms"
this.muicsroll.style.transform = "translate3d(0px,0px,0px)"
this.lastX = 0
}
if(this.posX < -(this.muicsroll.offsetWidth - this.muislider.offsetWidth)) {
this.muicsroll.style.transitionDuration = "500ms"
this.muicsroll.style.transform = "translate3d("+ (-(this.muicsroll.offsetWidth - this.muislider.offsetWidth)) +"px,0px,0px)"
this.lastX = -(this.muicsroll.offsetWidth - this.muislider.offsetWidth)
}
break;
}
},
changeActive: function(index) {
this.activeNav = index
}
}
}
</script>
<style>
</style>
/*
點擊切換選中用vue實現
通過判斷最左側點所在位置 （上次拖動離開后所在位置 + 本次移動的距離） 來進行定位
動畫效果 添加transform 屬性 參考mui中所添加的動畫代碼
*/
父子組件傳遞
父組件：
<template>
<div>
<nav-scroll :navList="navList" v-on:listenEvent="getActiveIndex"></nav-scroll>
</div>
</template>
<script>
import navscroll from './NavScroll.vue'
export default {
data() {
return {
navList: [
'推薦',
'熱點',
'北京',
'社會',
'娛樂',
'科技',
'財經',
'體育'
]
}
},
components: {
'nav-scroll': navscroll
},
mounted: function() {
},
methods: {
getActiveIndex: function(data) {
console.log(data)
}
}
}
</script>
<style>
</style>
子組件：
<template>
<div>
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item" :class="activeNav === index ? 'mui-active' : ''" v-for="(item,index) in navList" v-bind:key="index" @click="changeActive(index)">
{{item}}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
startX: '',
startY: '',
moveEndX: '',
moveEndY: '',
X: '',
Y: '',
muicsroll: undefined,
muislider: undefined,
lastX: 0, //上次所在位置
posX: 0, //最終位置 上次所在位置 + 移動的距離 this.X
activeNav: 0
}
},
props: ["navList"],
mounted: function() {
this.muicsroll = document.getElementsByClassName('mui-scroll')[0]
this.muislider = document.getElementsByClassName('mui-slider')[0]
this.scroll()
},
methods: {
scroll: function() {
this.muicsroll.addEventListener('touchstart',this.touch,false)
this.muicsroll.addEventListener('touchmove',this.touch,false)
this.muicsroll.addEventListener('touchend',this.touch,false)
},
touch: function(ev) {
var ev = ev || window.ev
switch(ev.type){
case 'touchstart':
this.startX = ev.touches[0].pageX
this.startY = ev.touches[0].pageY
break;
case 'touchmove':
this.moveEndX = ev.changedTouches[0].pageX
this.moveEndY = ev.changedTouches[0].pageY
this.X = this.moveEndX - this.startX
this.Y = this.moveEndY - this.startY
if ( Math.abs(this.X) > Math.abs(this.Y) && this.X > 0 ) {
this.posX = this.X + this.lastX
this.muicsroll.style.transform = "translate3d("+this.posX+"px,0px,0px)"
this.muicsroll.style.transitionDuration = "0ms"
this.muicsroll.style.transitionTimingFunction = "cubic-bezier(0.165, 0.84, 0.44, 1)"
}
if ( Math.abs(this.X) > Math.abs(this.Y) && this.X < 0 ) {
this.posX = this.X + this.lastX
this.muicsroll.style.transform = "translate3d("+this.posX+"px,0px,0px)"
this.muicsroll.style.transitionDuration = "0ms"
this.muicsroll.style.transitionTimingFunction = "cubic-bezier(0.165, 0.84, 0.44, 1)"
}
break;
case 'touchend':
this.lastX = this.posX
if(this.posX > 0) {
this.muicsroll.style.transitionDuration = "500ms"
this.muicsroll.style.transform = "translate3d(0px,0px,0px)"
this.lastX = 0
}
if(this.posX < -(this.muicsroll.offsetWidth - this.muislider.offsetWidth)) {
this.muicsroll.style.transitionDuration = "500ms"
this.muicsroll.style.transform = "translate3d("+ (-(this.muicsroll.offsetWidth - this.muislider.offsetWidth)) +"px,0px,0px)"
this.lastX = -(this.muicsroll.offsetWidth - this.muislider.offsetWidth)
}
break;
}
},
changeActive: function(index) {
this.activeNav = index
this.$emit('listenEvent',this.activeNav)
}
}
}
</script>
<style>
</style>
效果展示
