mui实现上下滑动控制显隐效果

lzugis

发布于 2020-02-11 15:13:27

2.8K0

发布于 2020-02-11 15:13:27

文章被收录于专栏：跟牛老师一起学WEBGIS

概述

本文讲述在mui框架下实现上下滑动控制显隐的效果。

效果

实现

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/drop.css">
    <link rel="stylesheet" href="mui/mui.css">
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div
			id="app"
			v-cloak>
			<div
				id="bottom"
				:class="isShow ? 'show' : 'hide'"
				class="bottom-box">
			</div>
		</div>
		<script src="mui/mui.js"></script>
		<script src="js/drop.js"></script>
	</body>
</html>

css

@charset "utf-8";

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.bottom-box {
  width: 100%;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: #dddddd;
  position: absolute;
  bottom: 0;
  &.hide {
    height: 3rem;
    transition: height 1s;
  }
  &.show {
    height: 100%;
    transition: height 1s;
  }
}

js

var app = new Vue({
  el: '#app',
  mounted() {
    this.init();
  },
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    init() {
      const self = this;
      mui.init({
        gestureConfig: {
          swipeup:true,//向上滑动
          swipedown:true,
          dragstart:true,//开始拖动
          drag:true,//拖动中
          dragend:true//拖动结束
        }
      });
      const bottom = document.getElementById('bottom');
      let startY = 0;
      document.addEventListener("dragstart",function(e){
        startY = e.detail.center.y;
      });
      document.addEventListener("drag",function(e){
        const dragY = e.detail.center.y;
        const deltY = dragY - startY;
        let objH = bottom.offsetHeight;
        // 往上拉
        if (deltY < 0 && !self.isShow) {
          objH = objH + Math.abs(deltY);
          bottom.style.height = objH + 'px';
        }
        // 往下拉
        if (deltY > 0 && self.isShow) {
          objH = objH - Math.abs(deltY);
          bottom.style.height = objH + 'px';
        }
      });
      document.addEventListener("dragend",function(e){
        const endY = e.detail.center.y;
        const deltY = endY - startY;
        // 下拉
        let objH = bottom.offsetHeight;
        if (deltY > 0) {
          objH = '3rem';
        } else { // 上拉
          objH = '100%';
        }
        bottom.style.height = objH;
        setTimeout(() => {
          self.isShow = deltY < 0;
        }, 1100);
      });
    }
  }
});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css