完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

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侧滑超出部分隐藏无法滚动的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • js+html5实现侧滑页面效果
  • MUI 实现侧滑菜单及其主体部分上下滑动的方法
赞 (0)

相关推荐

  • MUI 实现侧滑菜单及其主体部分上下滑动的方法

    在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑,而MUI侧滑菜单默认是没有上下滑动功能的,需要激活. 1.首先在 class="mui-scroll-wrapper" 的元素上添加ID: <!-- 侧滑导航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left&q

  • js+html5实现侧滑页面效果

    js+html5实现侧滑页面效果

    本文实例为大家分享了html5实现侧滑页面效果展示的具体代码,供大家参考,具体内容如下 before: after: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxim

  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格局,所以才无法滚动.那么如何解决这个问题呢? 解决方法: 一.在内容容器加上id,然后通过JS控制 <div class="mui-content mui-scroll-wrapper" id="scr1"> JS部分 <script> mui('#scr1').scroll(); </script> 二.利用创建子页面的方

  • 解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题

    最近开发一个基于mui框架的一个微信小程序,发现在使用mui框架中的switch开关的时候,想要达到联动的功能,让一个主开关控制几个子开关,发现虽然开关的颜色变了,但是开关上的小圆点不动,对于刚入mui框架的新手,觉得一脸的懵逼,经过多方查找,然后自己动手,解决了这个问题,就想在此分享一下. 页面上 <div class="mui-switch mui-active"> <div class="mui-switch-handle"></

  • 完美解决jQuery符号$与其他javascript 库、框架冲突的问题

    目前有大量的 javascript 开发框架,其中有一部分使用 $ 作为调用符号,这可能导致相互之间的冲突,而 jQuery 为解决这个问题,可以在 jQuery 导入时放弃 $ 使用权,届时 $ 则由其它框架使用,这样可以避免相同名字的函数调用不再冲突. jQuery 使用 noConflict 方法来放弃 $ 调用时的命名,之后由 jQuery 代替 $ 进行编写. 例如:alert($('#message').val()); 必须修改为 alert(jQuery('#message').v

  • mui框架 页面无法滚动的解决方法(推荐)

    只需要初始化一下就可以了 mui.init(); 加下面这段代码即可: (function($){ $(".mui-scroll-wrapper").scroll({ //bounce: false,//滚动条是否有弹力默认是true //indicators: false, //是否显示滚动条,默认是true }); })(mui); 以上这篇mui框架 页面无法滚动的解决方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章:

  • 完美解决beego 根目录不能访问静态文件的问题

    beego可算是Go框架里面文档最多的了.学起来比较容易.但是框架自身的局限性却带了不小的问题. 最近我在处理flash跨域问题上就遇到个活生生的例子: flash里面的as3访问外网时没啥问题.可是假如通过网页调取的情况下,flash访问的外网又与所在网页不是一个域的.就会产生跨域问题.打开浏览器,f12之后,看到的就是flash没有访问你的url,而是访问了这个url所在的域名根目录下的配置文件crossdomain.xml.该配置文件来设置跨域访问的权限. 这时候需要在你的域名根目录下放个

  • mui框架移动开发初体验详解

    mui框架移动开发初体验详解

    前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调. 博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服. 首先,我们在HBuilder上新建一个移动APP项目 1.1沉浸式状态栏(状态栏透明) 一般整个页面是图片时,会使状态栏透明. 首先,检测当前环境是否支持沉浸式状态栏.检测语句: <script type="text/javascript"> docume

  • 完美解决JS文件页面加载时的阻塞问题

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化为脚本使用,该方法不会造成页面渲染和onload事件的阻塞,因为是异步处理,推荐使用. 2.iframe注入:加载一个iframe框架,通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞,但是iframe元素开销较大,不推荐. 3.DOM注入:就是创建script元素,通过制定该元素的s

  • 完美解决thinkphp验证码出错无法显示的方法

    本文实例讲述了完美解决thinkphp验证码出错无法显示的方法.分享给大家供大家参考.具体分析如下: 今天做到验证码这一块,想到tp自带验证图片,大喜,但鼓捣半天不出来,一直是个小 X的样子. 官方提示如下: 如果无法显示验证码,请检查: ① PHP是否已经安装GD库支持: ② 输出之前是否有任何的输出(尤其是UTF8的BOM头信息输出): ③ Image类库是否正确导入: ④ 如果是中文验证码检查是否有拷贝字体文件到类库所在目录: 但是测试半天,不行!网上找来一个能用的方法,放到一个文件里执行

  • thinkphp多表查询两表有重复相同字段的完美解决方法

    框架:thinkphp 版本:3.2.3 内容:查询语句 解决问题:重复字段问题 $Data = M('a')->where($where) ->Field('a.name as aname,b.name as uname,a.*') ->join('b on b.jb_id=a.id') ->order('a.id desc') ->select(); 解释:a.* 查询a表所有的字段 a.name as aname 转换a表中的name重复字段为aname 以上就是小编为

  • CodeIgniter 完美解决URL含有中文字符串

    codeIgniter默认的配置下是不允许URL中包含非ASCII字符的,如果URL中含非ASCII字符,那么CI会毫不客气的抛出错误.本文章向码农介绍CodeIgniter 如何解决URL含有中文字符串. 你 可能会说,那我把这个URL使用函数urlencode一下呢?不行.因为Web Server会在接收到一个被urlencode的URL后自动将其decode,然后在PHP里得到的这些字符串转换成他原来所代表的含义,并使用 Web Server自己的URL编码字符集(IIS6 中文版是GBK

随机推荐