完美解决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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
微信小程序实现签字功能
Dec 23 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
JavaScript继承的三种方法实例
May 12 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python用户管理系统
2018/03/13 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python的faker库用法
2019/11/28 Python
为什么相对PHP黑python的更少
2020/06/21 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
班级学习雷锋活动总结
2014/07/04 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
信用卡工资证明范本
2014/10/17 职场文书
军训通讯稿范文
2015/07/18 职场文书
编写python程序的90条建议
2021/04/14 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python