web及h5上下翻页功能

实现上下翻页效果可以使用轮播图辅助实现，这里使用element-ui，其它插件使用方法类同，这里需注意将轮播图大小设置成满屏。
html代码：

      //:autoplay="false"不自动播放 :loop="false"不循环 direction="vertical"轮播为数值方向
<el-carousel ref="goupdown" height="100%" direction="vertical"  :autoplay="false" :loop="false">
    <el-carousel-item v-for="item in 3" :key="item">
        <h3>{{ item }}</h3>
    </el-carousel-item>
</el-carousel>

1、web端

添加监听鼠标滚动事件：

window.addEventListener('mousewheel',this.handleScroll);//类型mousewheel鼠标滚动事件 handleScroll事件名 vue项目可以写在mounted周期中


//事件函数
handleScroll(e){
     // console.log(e,"滚动")
     let direction = e.deltaY > 0 ? 'down':'up';  //deltaY为正则滚轮向下，为负滚轮向上
     if(direction=='down' && e.deltaY >= 100){ //100为用户一次滚动鼠标的wheelDelta的值 根据屏幕分辨率有所不同 一般为125 较小屏幕为100 这里使用100
         this.$refs.goupdown.next()	//轮播图方法，向下翻页
     }
     if(direction=='up' && e.deltaY <= -100){
         this.$refs.goupdown.prev() //轮播图方法，向上翻页
     }
 }

2、h5移动端

和上边原理一样，h5端实现翻页只需确定翻页方向即可。

//添加触摸事件，监听触摸开始及结束 vue项目可以写在mounted周期中
document.addEventListener('touchstart',this.touchstart);
document.addEventListener('touchend',this.touchend); 


//事件
touchstart(e){
    // console.log(e.changedTouches[0].pageY,"开始时触摸的位置")
    this.start = e.changedTouches[0].pageY //vue项目data中定义start记录开始坐标 js可直接定义变量
},
touchend(e){
    // console.log(e.changedTouches[0].pageY,"结束时触摸的位置")
    this.end = e.changedTouches[0].pageY //vue项目data中定义end记录结束坐标 js可直接定义变量
    if(this.end - this.start > 0){//结束y坐标 - 开始坐标 > 0 向上翻页 < 0向下翻页
        this.$refs.goupdown.prev()
    }else{
        this.$refs.goupdown.next()
    }
}

3、混合使用源码–vue

<template>
  <div class="main">
      <el-carousel ref="goupdown" height="100%" direction="vertical" :autoplay="false" :loop="false">
            <el-carousel-item v-for="item in 3" :key="item">
                <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
  </div>
</template>

<script>

export default {
    name: 'Main',
    data(){
        return {
            start: 0,
            end: 0
        }
    },
    mounted(){
        window.addEventListener('mousewheel',this.handleScroll);//mousewheel鼠标滚动事件

            document.addEventListener('touchstart',this.touchstart);
            document.addEventListener('touchend',this.touchend); 

        
    },
    methods:{
        handleScroll(e){
            // console.log(e,"滚动")
            let direction = e.deltaY > 0 ? 'down':'up';  
            if(direction=='down' && e.deltaY >= 100){ 
                this.$refs.goupdown.next()
            }
            if(direction=='up' && e.deltaY <= -100){
                this.$refs.goupdown.prev()
            }
        },

        touchstart(e){
            // console.log(e.changedTouches[0].pageY,"开始时触摸的位置")
            this.start = e.changedTouches[0].pageY
        },
        touchend(e){
            // console.log(e.changedTouches[0].pageY,"结束时触摸的位置")
            this.end = e.changedTouches[0].pageY
            if(this.end - this.start > 0){//结束y坐标 - 开始坐标 > 0 向上翻页 < 0向下翻页
                this.$refs.goupdown.prev()
            }else{
                this.$refs.goupdown.next()
            }
        }
    }
}
</script>

<style lang="less" scope>
    .main{
        height: 100%;
        width: 100%;
        // background: #000;
    }
</style>
<style lang="less">
    .main{
        .el-carousel{
            height: 100%;
        }
    }
</style>