mui 区域滚动

[MUI专题] 区域滚动 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。前言MUI提供了区域滚动的组件,使用时遵循DOM结构就可以。若是需要使用区域滚动的组件,就需要初... 阅读详情

我在实际使用中,这样代码虽然能用,但是有些地方他还没有讲明白,如果贸然添加这样的一个区块代码,不一定能实现滚动效果。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
</head>

<body>
	
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">区域滚动例子</h1>
    </header>
    
    <div class="mui-content">
        <div id="scroll1" class="mui-scroll-wrapper" style="top: 50px; bottom: 50px;">
            <!--MUI默认是position是absolute-->
            <div class="mui-scroll">
             
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-1
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-2
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-3
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-4
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-5
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-6
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-7
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-8
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-9
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-10
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-11
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-12
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-13
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-14
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-15
                    </li>
                </ul>
            </div>
        </div>
    </div>
   <script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script>
    <script type="text/javascript">
      
       	$(function(){
       		$('#scroll').scroll({
                indicators: true //是否显示滚动条
            });
        	
        	mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0006 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
            });
       
       	})
       
         
    </script>
</body>
</html>

 

 

 

 

 

文字上下轮播滚动,纯js实现,结构简单明了 文字上下轮播滚动,纯js实现,结构简单明了,几行代码即可 立即下载

相关推荐

Vue cli+mui 区域滚动的实例代码

vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url(/static/mui.min.css); JS import mui from '../../../static/mui.min.js'; 第二步 写结构 mui的区域滚动结构是这样的 <div class=mui-scroll-wrapper> <div class=mui-scroll> *写需要滚动的内容 </div> </div> 下面粘贴我代码的一部分 <div class=goods_foods mui-scroll-wrappe

MUI-scroll滚动,重新定位滚动位置

dom结构: 使用mui区域滚动,把需要滚动的内容放在其中 &lt;div class="mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt; &lt;!--这里放置真实显示的DOM内容--&gt; &lt;/div&gt; &lt;/div&gt; 初始化加载滚动条: mui('#mui-scroll')

LzzMandy的博客 5129

Mac版Burp Suite专业版破解与汉化完整指南

在Web安全测试领域,Java应用程序的许可证验证机制与本地化实现是常见的技术课题。其原理通常涉及Java Agent技术,通过在JVM启动时动态修改字节码,实现对软件授权状态的校验逻辑进行拦截与重写,从而绕过官方验证。同时,软件界面的国际化(i18n)与本地化(l10n)则依赖于资源文件的替换与加载。从技术价值角度看,深入理解这些机制不仅能满足特定场景下的工具定制需求,更能加深对Java安全机制、软件保护与逆向工程的理解。在实际的工程实践中,安全研究人员与开发者常面临功能受限或语言障碍的挑战,尤其是在渗透

weixin_29327525的博客 1037

移动端开发框架mui之scroll(区域滚动)、动态获取数据无法滚动问题

MUI 官网:https://www.dcloud.io/mui.html MUI 文档:https://dev.dcloud.net.cn/mui/ui/ 演示地址:https://dcloud.io/hellomui/ (支持手机和电脑浏览器) 开发工具:https://www.dcloud.io/hbuilderx.html (Hbuilder X) scroll (区域滚动) 在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题: Android平台4.0以.

zgphacker2010的专栏 4693

共聚焦显微镜的光源、工作原理与选型

共聚焦显微镜作为科研与工业领域中重要的微观成像工具,凭借光源的精准适配性、光学切片技术的三维成像能力,以及对不同工业场景的定制化适配潜力,为半导体检测、工业部件分析、智能制造升级提供了关键技术支撑。深入理解其光源特性、工作原理与选型逻辑,能帮助工程师与技术人员精准匹配设备与生产需求,既保障微观检测的精度与效率,又为产业优化、技术创新筑牢微观观测的基础。

PhotonixBay的博客 1537

LAMMPS实操系列(四): 高熵合金FCC-CoCrCuFeNi的退火模拟

我们对FCC-CoCrCuFeNi的退火模拟思路主要是,首先将材料以均匀的速率用100 ps从300 K升温至1000 K,然后在1000 K的温度下平衡100 ps,随后以均匀的速率用100 ps从1000 K降温至300 K,随后通过共轭梯度下降法做静力学结构优化得到退火后的结构。由于FCC-CoCrCuFeNi高熵合金被认为是潜在的工程结构材料[1],接下来我们将对退火前后的结构进行压缩模拟,对比退火前后FCC-CoCrCuFeNi高熵合金的力学性能变化,敬请各位读者关注我们的更新。

Ceshigo_CD的博客 4837

MUI-区域滚动mScroll

区域滚动的结构 &lt;div class="mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt; &lt;!--这里放置真实显示的DOM内容--&gt; &lt;/div&gt; &lt;/div&gt; . mui-scroll-wrapper的默认样式如下: .mui-scroll-wrapper

LzzMandy的博客 1324

Xilinx Vitis 2020.1头文件路径配置避坑指南:解决#include找不到文件的常见问题

本文针对Xilinx Vitis 2020.1开发环境中常见的#include头文件找不到问题,提供了系统的避坑指南。文章深入解析了Vitis的头文件搜索机制,对比了通过工程属性GUI、修改编译命令及使用环境变量三种配置方法的优劣与隐藏陷阱,并给出了高级场景的排查流程与工程结构最佳实践,帮助开发者高效解决路径配置难题。

weixin_28831399的博客 570

MUI实现区域滚动

移动端页面区域滚动的实现 基于MUI 引入相关包 &lt;!-- 1. 引入mui的CSS文件 --&gt; &lt;link rel="stylesheet" href="lib/mui/css/mui.css"&gt; &lt;!-- 2. 引入mui的js文件 --&gt; &lt;script src="lib/mui/js/mui.js"&gt;&lt;/scrip

fy_long的博客 1万+

Comsol&Matlab 亥姆霍兹共振消声器传递损失理论解与仿真解

当外界噪声以共振频率进入共振器时,共振器内的空气质量发生周期性的振动,从而减少或消除噪声。当特定频率的声波进入共振器时,共振器的空气质量会发生周期性的振动,从而实现对该频率的噪声的减弱或消除。5. 反射和吸收:共振器的几何形状和容积还可以影响共振器内空气振动的反射和吸收。然而,对于不同频率的噪声,需要相应调整共振器的参数以匹配新的共振频率。3. 腔体内的空气振动:当特定频率的声波进入共振器时,共振器内的空气质量会发生振动。2. 声波进入共振器:外界的声波通过共振器的颈部进入共振器的封闭空腔。

声学黑洞仿真工作室 4575

WRF和WPS安装和编译时遇到的问题

检查是否自己netcdf和Fortran编译器一致。解决办法:修改configure.wps里的路径。如果没问题且wrf已成功编译,考虑重新。path修改为jasper在的路径。

m0_54898744的博客 1837

Mui获取页面滚动距离

var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper').addEventListener('scroll',function (e) {   consol...

chuyinguan0351的博客 745

为Ollama本地大模型添加持久化记忆层:openclaw-ollama-memory项目详解

在构建基于大型语言模型(LLM)的对话应用时,上下文管理是核心技术挑战之一。其原理在于模型本身不具备跨会话的持久化记忆能力,每次请求都是独立的。这导致在多轮对话中,模型无法有效利用历史信息,用户体验割裂。从技术价值看,独立的记忆层通过解耦推理与存储,能突破模型固定上下文窗口的限制,实现更智能、连贯的交互。其核心应用场景包括聊天机器人、智能助手及需要长期记忆的复杂代理。本文聚焦的 openclaw-ollama-memory 项目,正是为 Ollama 生态提供的记忆层解决方案,它通过向量检索和智能摘要等机制

weixin_42521558的博客 312

mui设置滚动区域

自定义滚动区域肯定要设置高度。但是假设你的自定义区域就是mui-content区域。那么使用的时候,应该把mui-content和mui-scroll-wrapper放在一起就可以了。这样就不需要设置高度了。&lt;div id="scroll" class="mui-content mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt...

yijiupingfan0914的博客 9092

Qt6导航组件系列专栏:30+常见导航场景的实现

本文介绍了Qt6导航组件系列专栏,涵盖30+常见导航场景的实现方案。专栏分为7组:基础侧边栏系列、社交与协作导航系列、文件与项目导航系列、工业与车载导航系列、创意与扩展导航系列、办公与效率导航系列、流程与引导导航系列。

u011186532的专栏 1133

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

mui区域滚动条

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;%@ page contentType="text/html;charset=utf-8"%&gt;&lt;%@ include file...

weixin_33909059的博客 992

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

MUI开发APP,scroll组件,运用到区域滚动

        最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部。         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果如下: 这里面需要注意到的地方就是,头和底是固定的,但是中间的部分呢,由于要设置24小时的内容,从图中可以看到,只显示了03:00~13:00的内容,剩下的内容没显示出来。...

weixin_34372728的博客 379

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

mui区域滚动失效的问题

在开发 mui加vue 做开发的时候发行这两个框架一起使用问题真的太多了无力吐槽 渲染内容区域要用一个元素包起来(推荐用div) 高度必须auto 或者不设置 否则无法滚动 mui-scroll-wrapper 的overflow 改成 scroll 因为overflow默认是hidden, &lt;div style="top: 230px;overflow: scroll;height...

weixin_42307129的博客 4704

Vue cli+mui 区域滚动

vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url("/static/mui.min.css");JS import mui from '../../../static/mui.min.js'; 第二步 写结构  mui的区域滚动结构是这样的 *写需要滚动的内容 下面粘贴我代码的一部分

山外小楼 3901

mui区域滚动

1.引入:mui.cssmui.min.cssmui.js2、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-wi...

weixin_30362801的博客 193

使用mui区域滚动遇到的问题

1.引入mui.js后,tabbar失效 <router-link class="mui-tab-item1" to="/home"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </rou...

weixin_45822022的博客 1091

mui框架开发中下拉刷新页面无法添加区域滚动的问题

这几天在用到mui框架开发app时遇到了一些前端页面构建的一些问题,在鼓捣了一天也没有太好的解决办法后,特地记录下这个问题。 在mui框架初始的默认下拉刷新上拉加载的结构之中,无法添加区域滚动的问题 此问题出现在构建类似原生手机端app时遇到的,大概需求是要在一个可下拉刷新的页面之中点击筛选框弹出特定的下拉列表。本来看到mui框架对于区域...

weixin_33982670的博客 1476

mui的上拉刷新与内容区域滚动冲突bug

mui的上拉刷新有一个初始化 mui.init({ pullRefresh : { container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等 up : { height:50,//可选.默认50.触发上拉加载拖动距离 auto:true,//可选,默认false.自动上拉加载一次 contentrefr...

John_lv的博客 1140

MUI使区域滚动的滚动条消失的办法

网上查了几种方法就这个靠谱 .mui-scrollbar { display: none !important; }

山外小楼 4608

mui 区域横向滚动 无法滚动显示全部内容的问题

需要做一个横向的区域滚动,按官方的模板,在实际运用中发现横线滚动只能显示部分内容,剩下的滑不动了,找了很久原因,最后发现需要在类mui-control-item 上自定义宽度就可以了,记录一下。 效果图 实现的部分代码: <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-...

xie_candy的博客 1399

MUI scroll(区域滚动)问题

                                                 MUI scroll(区域滚动)问题 1)在手机APP上,我们需要进行组件的滑动或者定位,可能会出现滑动方法不起作用。 例如: 功能:滚动到特定位置 方法:scrollTo( xpos , ypos [, duration] ) 案例:mui('.mui-scroll-wrapper')....

你是欢喜的年少 6032
上一篇: 解决同步Ajax页面假死
下一篇: GitHub上整理的一些工具
cery_csdn
博客等级 码龄11年 2粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值