完美解决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创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
cookie的secure属性详解
Apr 08 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
JavaScript中reduce()的用法
May 11 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 文件缓存函数
2011/10/08 PHP
PHP关联链接常用代码
2012/11/05 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
python发送伪造的arp请求
2014/01/09 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python中的逆序遍历实例
2019/12/25 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
初中三好学生自我鉴定
2014/04/07 职场文书
社团活动总结报告
2014/06/27 职场文书
项目工作说明书
2014/07/29 职场文书
食品安全演讲稿
2014/09/01 职场文书
请病假条范文
2015/08/17 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis