實現手機端滑動導航條,帶有彈性回彈效果


<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>

 

 

效果展示

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM