mui区域滚动条

最新推荐文章于 2024-09-13 19:59:17 发布
最新推荐文章于 2024-09-13 19:59:17 发布
阅读量940 收藏
点赞数
文章标签： xhtml c# javascript ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>爱玛客微信点餐</title>
<link href="${rootUrl }css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${rootUrl }css/font-awesome.min.css" />
<link href="${rootUrl }css/an-app.css" rel="stylesheet" />
<script src="${rootUrl }js/jquery/jquery.js" type="text/javascript"></script>
<style>
.mui-row.mui-fullscreen>[class*="mui-col-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
width: 100%;
}
</style>

</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 src="${rootUrl }js/mui.min.js"></script>
<script type="text/javascript" src="${rootUrl }js/app.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>

weixin_33909059
关注
[MUI专题] 区域滚动
算法与编程之美
08-05 531
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。前言MUI提供了区域滚动的组件，使用时遵循DOM结构就可以。若是需要使用区域滚动的组件，就需要初...
mui框架内容区域滚动部分详解注意事项
qq_34559257的博客
06-12 6238
（1）下拉刷新完成后要结束下拉刷新 不仅要渲染页面还需要调用结束下拉刷新的方法mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();（2）上拉加载提示没有数据的时候 如果下拉刷新需要再次能够上拉加载 在下拉刷新的回调函数还需要重置上拉加载mui('.mui-scroll-wrapper').pullRefresh().ref...
mui 区域滚动
cery_csdn的博客
06-10 5298
我在实际使用中，这样代码虽然能用，但是有些地方他还没有讲明白，如果贸然添加这样的一个区块代码，不一定能实现滚动效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
MUI-垂直滚动的实现
最新发布
ydk1203的博客
09-13 237
/ 当到达最后一个时，重置位置。// 等待动画结束再重置。// 每3秒滚动一次。
mui添加滚动条
qq_32973061的博客
12-12 4476
根据文档提示，在需要添加滚动条的区域，引入       &lt;div class="mui-scroll-wrapper"&gt;              &lt;div class="mui-scroll"&gt;                      &lt;!--这里放置真实显示的DOM内容--&gt;             &lt;/div&gt;      &lt;/div&
MUI-区域滚动mScroll
LzzMandy的博客
01-07 1192
区域滚动的结构 &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
MUI实现区域滚动
热门推荐
fy_long的博客
10-14 1万+
移动端页面区域滚动的实现 基于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
mui滚动条 的实现源代码
11-15
本篇文章将重点讨论"MUI滚动条的实现源代码"以及相关问题。 首先，MUI滚动条的设计目标是模仿原生App的滑动体验，它通过JavaScript和CSS实现，提供流畅的触摸滚动效果。在MUI框架中，滚动条的实现主要依赖于`mui-...
mui框架 页面无法滚动的解决方法(推荐)
08-28
indicators: false, // 默认为true，若不需要显示滚动条，可设为false }); }); })(mui); ``` 在这个例子中，`.mui-scroll-wrapper`是Mui框架中用于包裹可滚动内容的类。通过为这个类添加`.scroll()`方法，我们...
mui滚动条代码实现及常见问题解决方法
最后，“Mui 区域滚动scroll底部显示不完全的问题_weixin_***的博客-CSDN博客.url”这个文件名告诉我们，这可能是一个博客文章的链接，其中详细描述了mui滚动条在实际应用中出现的一个问题，即滚动区域底部显示不...
mui滚动事件中，自定义横向滑动失效
xue080414的博客
01-08 1264
查了很多资料，也没有找到解决办法，最后自己给滑动区域写一个拖拽事件                            //开始拖动                             var cantrans=change=oldtrans=newtrans=0;                             mui('.attentionDiv').on('dragstart...
Vue cli+mui 区域滚动的实例代码
12-29
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
html5+css+mui chat聊天窗口聊天气泡 调用相机 手机图册 聊天表情
09-08
html5+css+mui chat聊天窗口聊天气泡 支持调用相机 支持手机图册 聊天表情 支持聊天气泡宽度根据文字长度进行自适应 美观大方
移动端开发框架mui之scroll(区域滚动)、动态获取数据无法滚动问题
zgphacker2010的专栏
03-13 3698
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以.
MUI开发APP，scroll组件，运用到区域滚动
weixin_34372728的博客
04-12 299
        最近在开发APP的过程中，遇到一个问题，就是内容有一个固定的头部和底部。         头部就是我们常用的header了，底部的话，就放置一个button，用来提交页面数据或者进入下一个页面等，效果如下： 这里面需要注意到的地方就是，头和底是固定的，但是中间的部分呢，由于要设置24小时的内容，从图中可以看到，只显示了03:00~13:00的内容，剩下的内容没显示出来。...
Mui去掉滚动条：
weixin_30412167的博客
09-18 301
/////////去掉滚动条mui.plusReady(function(){plus.webview.currentWebview().setStyle({scrollIndicator:'none',softinputMode:"adjustResize"});}) 让文字逐渐出现： window.onload=function(){ varstory = docu...
mui滚动条实现横竖都能滚动
风云的博客
06-13 2583
网上查了半天就没有说明白的，官方文档也是言语不详，但是有点用。 首先：在mui做手机app的时候，自己通过overflow:auto;然后固定宽高去展示滚动条是不好使的，只能用它提供的这种滚动方法。 官方例子 <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--这里放置真实显示的DO...
MUI-scroll滚动，重新定位滚动位置
LzzMandy的博客
01-17 4813
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')
MUI如何实现页面滚动
qq_36317441的博客
05-23 3106
开发的过程中要实现如下所示的表单页面，但是这个页面老是不能滚动，后来百度了一下，总算解决了问题，需要用一段js代码来控制div层的滚动。(function($) { $(".mui-scroll-wrapper").scroll({}); })(mui);用这段代码就可以控制页面滚动了。全部代码如下所示：&lt;!doctype html&gt; &lt;html&gt; &lt...
mui Select 滚动条
04-27
您可以使用样式覆盖来修改mui Select组件中滚动条的样式。具体来说，您可以使用以下CSS代码来修改滚动条的样式： ``` /* 滚动条轨道 */ .MuiSelect-select.MuiSelect-selectMenu.MuiInputBase-input::-webkit-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值