完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题


Posted in Javascript onJanuary 25, 2018

mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格局,所以才无法滚动。那么如何解决这个问题呢?

解决方法:

一、在内容容器加上id,然后通过JS控制

<div class="mui-content mui-scroll-wrapper" id="scr1">

JS部分

<script>
mui('#scr1').scroll();
</script>

二、利用创建子页面的方式:

mui.init({
subpages:[{
url:'index.html',   //要引入的页面
id:'index.html' , //要引入页面的标志
style:{
top:'50px',   //页面顶部的位置
bottom:'0px'
}
extrax{}    //额外扩展参数
}]
});

在index.html页面中就可以写内容了,而且会出现滚动条

以上这篇完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
微信小程序 搜索框组件代码实例
Sep 06 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 #Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 #Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 #Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 #Javascript
基于vue开发的在线付费课程应用过程
Jan 25 #Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 #Javascript
关于express与koa的使用对比详解
Jan 25 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python批量转换文件编码格式
2015/05/17 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
维护民族团结演讲稿
2014/08/27 职场文书
会计人员演讲稿
2014/09/11 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers