完美解决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 开发中规范性的一点感想
Jun 23 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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
一个程序下载的管理程序(一)
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python复制文件到指定目录的实例
2018/04/27 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python assert关键字原理及实例解析
2019/12/13 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python包和模块的分发详细介绍
2020/06/19 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
毕业生自我鉴定
2013/11/05 职场文书
社区工作者思想汇报
2014/01/13 职场文书
作风建设演讲稿
2014/05/23 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2014年党建工作总结
2014/11/11 职场文书
道德模范事迹材料
2014/12/20 职场文书
企业催款函范本
2015/06/24 职场文书
医学会议开幕词
2016/03/03 职场文书