移动端手指滑动，高度跟随手指滑动位置而改变

效果：列表刚开始显示高度为200，手指滑动，列表高度随手指位置改变，列表最高高度为500

实现这个功能之前先说一下手指触摸事件

//手指按下触发
touchstart(event) {
    var touch = event.touches[0];
    this.startY = touch.pageY;
    this.startX = touch.pageX;
    event.stopPropagation();   
},
//手指移动触发
touchmove(event) {
    var touch = event.touches[0];
    this.endY = this.startY - touch.pageY;
    this.endX = this.startX - touch.pageX;
    this.touchY = touch.pageY
    event.stopPropagation();
},
//手指离开触发
touchend(event) {
    if (this.endY > 0) {
    	//手指向上滑动
    } else if (this.endY < 0) {
    	//手指向下滑动
    }
    //需要重置
    this.endY = 0;
    event.stopPropagation();
},

说完触摸事件开始进入正题

mounted() {
	//设置列表起始高度
    this.$refs.tabsHeaderRef.style.height = '200px';
    this.$refs.tabsHeaderRef.style.transition = 'all .2s ease-in-out'
    //获取屏幕高度
    this.bodyHeight = document.documentElement.clientHeight;
},
methods: {
	touchstart(event) {
          var touch = event.touches[0];
          
          //手指按下位置
          this.startY = touch.pageY;
          this.startX = touch.pageX;
          event.stopPropagation();   
      },
	touchmove(event) {
        var touch = event.touches[0];
        
        //this.endY = 手指按下位置 - 手指当前位置（获取到是向上还是向下滑动）
        this.endY = this.startY - touch.pageY;
        this.endX = this.startX - touch.pageX;
        
        //保存当前位置，下面函数需要用到
        this.touchY = touch.pageY
        //设置元素高度，
        //如果手指开始滑动位置超过500，设置元素高度为200px
        //如果手指开始滑动位置在200-500之间，就用这个数值当做元素的高度
        //如果手指开始滑动位置小于200，设置元素高度为500px
        ！！！因为手指滑动的位置是以屏幕顶部开始算，顶部为0，底部为屏幕高度，所以touch.pageY > 500的时候元素高度为200，touch.pageY <= 200的时候元素高度设置500，（如果不明白的话可以试一下就知道啦）
        if(touch.pageY > this.bodyHeight - 200) {
            this.$refs.tabsHeaderRef.style.height = '200px';
            this.listIsShow = false;
        }else if(this.bodyHeight - touch.pageY >= 200 && this.bodyHeight - touch.pageY < 450){
            this.listIsShow = true;
            this.$refs.tabsHeaderRef.style.height = (this.bodyHeight - touch.pageY+50)+'px';
            //给高度变化加上动画
            this.$refs.tabsHeaderRef.style.transition = 'all -.29s ease-in-out';
        }else if(touch.pageY <= this.bodyHeight - 500) {
            this.$refs.tabsHeaderRef.style.height = '500px';
        }
        event.stopPropagation();
    },
    touchend(event) {
    	//如果向上滑动，设置高度为500
        if (this.endY >= 0) {
           this.$refs.tabsHeaderRef.style.height = '500px'
           this.$refs.tabsHeaderRef.style.transition = 'all .2s ease-in-out'
           this.listIsShow = true
           setTimeout(()=> {
               this.listIsShow = true
           },200)
       } else if (this.endY < 0) {
           this.$refs.tabsHeaderRef.style.height = '200px'
           this.$refs.tabsHeaderRef.style.transition = 'all .2s ease-in-out'
           setTimeout(()=> {
               this.listIsShow = false
           },200)
       }
       //需要重置endY
       this.endY = 0;
       event.stopPropagation();
   }
}

全部代码（用之前先 npm i vant -S）

<template>
    <div>
        <div
            class="tabsHeaderRef"
            ref="tabsHeaderRef"
            v-show="indexIsShow"
        >
            <div class="tabs"
                @touchstart="touchstart"
                @touchmove="touchmove"
                @touchend="touchend"
            >
            </div>
            <div class="list" v-show="listIsShow && list.length">
                <div class="van-clearfix">
                    <van-cell
                        :title="item.title"
                        v-for="item in list"
                        :key="item.id"
                        icon="location-o"
                    >
                        <template #right-icon>
                            <van-icon name="arrow" class="arrow"/>
                        </template>
                    </van-cell>
                </div>
            </div>
            <van-empty description="空空如也" v-show="listIsShow && !list.length"/>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'touch',
        data() {
            return {
                loading: false,
                finished: false,
                // 首页显示
                indexIsShow: true,
                // 列表显示
                listIsShow: false,
                list: [
                    {
                        title: 'Alibaba',
                        id: 1,
                    },
                    {
                        title: 'BaiDu',
                        id: 2,
                    },
                    {
                        title: 'Tencent',
                        id: 3,
                    },
                    {
                        title: 'HUAWEI',
                        id: 4,
                    },
                    {
                        title: 'Samsung',
                        id: 5,
                    },
                    {
                        title: 'Amazon',
                        id: 6,
                    },
                    {
                        title: 'Facebook',
                        id: 7,
                    },
                    {
                        title: 'Google',
                        id: 8,
                    },
                    {
                        title: 'Tesla',
                        id: 9,
                    },
                    {
                        title: 'General dynamics',
                        id: 10,
                    }
                ],
                bodyHeight: 0,
                touchY: 0,
                search: ''
            }
        },
        mounted() {
            this.$refs.tabsHeaderRef.style.height = '200px';
            this.$refs.tabsHeaderRef.style.transition = 'all .2s ease-in-out'
            this.bodyHeight = document.documentElement.clientHeight;
            console.log(this.bodyHeight)
        },
        methods: {
            touchstart(event) {
                var touch = event.touches[0];
                this.startY = touch.pageY;
                this.startX = touch.pageX;
                // event.preventDefault();
                // event.stopPropagation();
            },
            touchmove(event) {
                var touch = event.touches[0];
                this.endY = this.startY - touch.pageY;
                this.endX = this.startX - touch.pageX;
                this.touchY = touch.pageY
                console.log(touch.pageY)
                console.log(this.bodyHeight)
                if(touch.pageY > this.bodyHeight - 200) {
                    this.$refs.tabsHeaderRef.style.height = '200px';
                    this.listIsShow = false;
                }else if(this.bodyHeight - touch.pageY >= 200 && this.bodyHeight - touch.pageY < 450){
                    this.listIsShow = true;
                    this.$refs.tabsHeaderRef.style.height = (this.bodyHeight - touch.pageY+50)+'px';
                    this.$refs.tabsHeaderRef.style.transition = 'all -.29s ease-in-out';
                }else if(touch.pageY <= this.bodyHeight - 500) {
                    this.$refs.tabsHeaderRef.style.height = '500px';
                }
            },
            touchend(event) {
                if (this.endY >= 0) {
                    this.$refs.tabsHeaderRef.style.height = '500px'
                    this.$refs.tabsHeaderRef.style.transition = 'all .2s ease-in-out'
                    this.listIsShow = true
                    setTimeout(()=> {
                        this.listIsShow = true
                    },200)
                } else if (this.endY < 0) {
                    this.$refs.tabsHeaderRef.style.height = '200px'
                    this.$refs.tabsHeaderRef.style.transition = 'all .2s ease-in-out'
                    setTimeout(()=> {
                        this.listIsShow = false
                    },200)
                }
                this.endY = 0;
            },
        },
    }
</script>
<style scoped>
    .tabsHeaderRef {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 0 4px;
        background: #ccc;
    }
    .van-cell {
        padding: 6px
    }
    .tabsHeaderRef >>> .van-tab--active {
        color: #0D5CAB;
    }
    .tabs {
        touch-action: none;
        width: 100%;
        height: 200px;
        background: #666;
    }
    .tabs .van-cell {
        padding-bottom: 0;
    }
    .tabsHeaderRef >>> .van-tabs--line .van-tabs__wrap {
        height: 36px;
    }
    .list {
        height: 100%;
        overflow: auto;
        max-height: 64%;
        margin-top: 2%;
    }
    .list .van-icon {
        color: #707070;
        font-size: 17px;
        top: 1px;
    }
    .van-cell::after {
        left: 8px;
        right: 8px;
    }
</style>

各位客官要是感觉有用的话能留个小心心嘛,谢谢啦！！！^ v ^