完美解决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对象方法参考
Oct 03 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php利用事务处理转账问题
2015/04/22 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
Laravel日志用法详解
2016/10/09 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Django框架 信号调度原理解析
2019/09/04 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
Python 发送邮件方法总结
2020/08/10 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
九月份红领巾广播稿
2014/01/22 职场文书
电工工作职责范本
2014/02/22 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
python缺失值的解决方法总结
2021/06/09 Python