概述

本文讲述在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><divid="app"v-cloak><divid="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);});}}
});

mui实现上下滑动控制显隐效果相关推荐

Wex5 组件的bind-visible属性控制显隐
1.选择需要控制显隐的组件,在bind-visible属性绑定值 2.js代码如下 3.在控制显隐的btn按钮的点击事件中,js代码如下或者有更灵活的写法this.shouldShowVersion ...
Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔
Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下. <template><div class=" ...
Unity克隆物体并控制显隐
克隆物体的子物体的控制属于动态显隐控制,无法提前拖动到代码的变量之上,正好项目中遇到了,因此专门写了一个小程序测试了一下克隆物体的子物体名字的不变性,克隆的物体这里我单独命名了.主界面如下(包括了h ...
元素显隐切换过渡效果的实现
近来看到饿了么 App和 h5站上,在商家详情页点餐之后,底部放置了一个点击之后能够弹出模态框查看点餐详情的元素,其中有个背景遮罩层的渐进显隐的效果. 凭着我少许的经验,第一时间的想法是觉得这个遮罩 ...
【vue】仿淘宝商品详情---实现滚动显隐标签页锚点导航
先看图利用css的opacity实现了在滚动时对导航栏透明度的改变,达到导航栏滚动显隐效果说明封装成组件复用的话,首先快捷键的每一项数据需要父组件传入:在父组件定义一个数组作为右侧导航栏的数据: ...
2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...
类似QQ管家页面jquery图片显隐轮换效果
一晃端午节又过去了,又得开始新的工作累人啊. 这两天jquery博客有不少感慨,感觉人有时要是言而无信,那不管做什么事情都不会成功的,觉得,既然说出口了,或者,暗暗下决心做了,就一定做成功.如果不行, ...
ArcGIS JS API 4.X实现动态地图服务子图层显隐控制
ArcGIS JS API 4.X实现动态地图服务子图层显隐控制文章目录 ArcGIS JS API 4.X实现动态地图服务子图层显隐控制使用场景官网示例注意事项使用场景图层控制功能官网 ...
Android隐藏导航栏按键,Android如何控制导航栏单个按键的显隐状态
我们都知道Android系统的导航栏通常有三个按键,分别是BACK, HOME, APP_SWITCH. 网上很多有关导航栏和状态栏显隐的文章,但几乎都是控制导航栏或状态栏所有按键同时显示或消失,如果 ...

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

概述

效果

实现

html

css

js

mui实现上下滑动控制显隐效果相关推荐

最新文章

热门文章