完美解决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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
详解小程序循环require之坑
Mar 08 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
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中获取文件扩展名的N种方法小结
2012/02/27 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
深入理解python try异常处理机制
2016/06/01 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
C# .NET面试题
2015/11/28 面试题
《狼和小羊》教学反思
2014/04/20 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
土地转让协议书
2014/09/27 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript