找回密码
当前位置：前端开发者 > Vue.js > 正文

前端开发Vue手写标签切换和左右滑动

2019-02-18 20:00:00 分类：Vue.js 阅读(1227) 评论(0)
游戏前端开发主程
游戏开发前端后端
游戏前端开发 策划

<template>
<div class=”stuMySign”>
<div class=”navhead”>
<ul class=”x-title” v-for=”(item, index) in items” @click=”tab(index)”>
<li :class=”{active: activeIndex === index}”>{{item.title}}</li>
</ul>
</div>
<div class=”sign-content” v-show=”activeIndex==0″>
<stuSign :date-sign=”dataUrl[0]”></stuSign>
</div>
<div class=”sign-content” v-show=”activeIndex==1″>
<stuSign :date-sign=”dataUrl[1]”></stuSign>
</div>
<div class=”sign-content” v-show=”activeIndex==2″>
<stuSign :date-sign=”dataUrl[2]”></stuSign>
</div>
<div class=”sign-content” v-show=”activeIndex==3″>
<stuSign :date-sign=”dataUrl[3]”></stuSign>
</div>

</div>
</template>

<script>
    import $ from ‘webpack-zepto’
    export default {
        data() {
            return {
                activeIndex: 0,
                items: [
                    { title: ‘产品介绍1’ },
                    { title: ‘产品介绍2’ },
                    { title: ‘产品介绍3’ },
                    { title: ‘产品介绍4’ },
                ],
            }
        },
        mounted() {
            var that = this
            this.$nextTick(function() {
                var startPosition, endPosition, deltaX, deltaY, moveLength
                $(‘.sign-content’)
                    .bind(‘touchstart’, function(e) {
                        var touch = e.touches[0]
                        startPosition = {
                            x: touch.pageX,
                            y: touch.pageY,
                        }
                    })
                    .bind(‘touchmove’, function(e) {
                        var touch = e.touches[0]
                        endPosition = {
                            x: touch.pageX,
                            y: touch.pageY,
                        }
                        deltaX = endPosition.x – startPosition.x
                        deltaY = endPosition.y – startPosition.y
                        moveLength = Math.sqrt(
                            Math.pow(Math.abs(deltaX), 2) +
                                Math.pow(Math.abs(deltaY), 2),
                        )
                    })
                    .bind(‘touchend’, function(e) {
                        if (deltaX < 0) {
                            // 向左划动
                            console.log(‘向左划动’)
                            if (that.activeIndex >= 3) {
                                that.activeIndex = 3
                            } else {
                                that.activeIndex++
                            }
                        } else if (deltaX > 0) {
                            // 向右划动
                            console.log(‘向右划动’)
                            if (that.activeIndex <= 0) {
                                that.activeIndex = 0
                            } else {
                                that.activeIndex–
                            }
                        }
                    })
            })
        },
        methods: {
            tab: function(index) {
                this.activeIndex = index
            },
        },
    }
</script>

<style scoped>
*{padding: 0; margin: 0;-webkit-box-sizing:border-box;box-sizing:border-box}
.stuMySign{ overflow: hidden}
.navhead{ position: fixed; z-index: 999; top: 3rem; width: 100%;}
.navhead ul{ width: 25%;float: left; height: 2.5rem; line-height: 2.5rem;}
.navhead ul .active{ color: #f00;}
.sign-content{ position: fixed; left: 0; top: 0; padding-top:5.6rem; height: 100%; width: 100%; }

</style>

杭州 游戏前端开发
web前端游戏开发
前端游戏开发技能要求
» 本文来自：前端开发者 » 《前端开发Vue手写标签切换和左右滑动》
» 本文链接地址：https://www.rokub.com/8069.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论