mui区域滚动

最新推荐文章于 2022-03-03 14:55:52 发布
最新推荐文章于 2022-03-03 14:55:52 发布
阅读量122 收藏
点赞数
原文链接：http://www.cnblogs.com/2070393244com/p/11458891.html
版权

1.引入：

mui.css


mui.min.css

 

mui.js

 2、代码

 

<!DOCTYPE html>

 

<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="/css/mui.min.css">
<link rel="stylesheet" href="css/icons-extra.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<style>
.mui-input-clear.mui-indexed-list-search-input {
margin-bottom: 5px;
}
ul li{
width: 40px;
height: 40px;
margin-bottom: 10px;
display: block;
border: 1px solid red;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
margin-right: 0px;
padding: 10px 5px 0 10px;
}
.mui-table-view.mui-grid-view {
padding: 3px 1px 1px 3px;
}
.ulboder>li
{
border: 1px solid #E5E5E5;
margin: 0 0px -1px -1px;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active
{
background-color: #fff;
}
/*上拉加载样式*/
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
</style>
</head>
<body id="bd">
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3" style="position:fixed;top:0px;bottom:0px;overflow-y:scroll;overflow-x:hidden">
<div id="tab-item" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<div class="mui-loading">
<div class="mui-spinner">
<ul>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mui-col-xs-3" style="position:fixed;top:0px;bottom:0px;overflow-y:scroll;overflow-x:hidden;transform: translateX(100px);">
<div id="tab-item" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<div class="mui-loading">
<div class="mui-spinner">
<ul>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mui-col-xs-3" style="position:fixed;top:0px;bottom:0px;overflow-y:scroll;overflow-x:hidden;transform: translateX(200px);">
<div id="tab-item" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<div class="mui-loading">
<div class="mui-spinner">
<ul>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.js"></script>
</body>
</html>

转载于:https://www.cnblogs.com/2070393244com/p/11458891.html

weixin_30362801
关注
mui 区域滚动+触底加载
05-16
该文件是项目单页，可以通过双击直接在浏览器打开。
MUI-scroll滚动，重新定位滚动位置
LzzMandy的博客
01-17 4772
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之scroll(区域滚动)、动态获取数据无法滚动问题
zgphacker2010的专栏
03-13 3544
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 选项卡tab页实现区域滚动，Ajax函数渲染数据（选项卡+scroll滚动+折叠面板）
shanxiu_的博客
03-03 1068
效果图预览 一、HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>news</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
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-区域滚动mScroll
LzzMandy的博客
01-07 1176
区域滚动的结构 &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
Vue cli+mui 区域滚动的实例代码
08-28
Vue cli+mui 区域滚动的实例代码 在这篇文章中，我们将学习如何使用 Vue cli 和 mui 实现区域滚动的效果。下面，我们将详细介绍这个实例代码，并对其进行详细的分析。 首先，让我们来看一下这个实例代码的结构。...
mui滚动条 的实现源代码
11-15
3. **区域滚动到底部显示不完全**："Mui 区域滚动scroll底部显示不完全的问题"表明在滚动到内容底部时，可能存在部分内容没有完全显示。这可能是由于布局、定位或者内边距问题导致的，需要检查相关CSS属性并调整。 ...
mui框架 页面无法滚动的解决方法(推荐)
08-28
Mui框架提供了一个滚动组件，用于实现页面或特定区域的滚动效果。在页面加载完成后，需要调用`mui.init()`来初始化整个框架，包括滚动功能。如果这个步骤被遗漏，页面的滚动可能就会失效。 解决此问题的方法是确保...
mui设置滚动区域
yijiupingfan0914的博客
07-06 8966
自定义滚动区域肯定要设置高度。但是假设你的自定义区域就是mui-content区域。那么使用的时候，应该把mui-content和mui-scroll-wrapper放在一起就可以了。这样就不需要设置高度了。&lt;div id="scroll" class="mui-content mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt...
[MUI专题] 区域滚动
算法与编程之美
08-05 500
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。前言MUI提供了区域滚动的组件，使用时遵循DOM结构就可以。若是需要使用区域滚动的组件，就需要初...
mui 区域滚动
cery_csdn的博客
06-10 5279
我在实际使用中，这样代码虽然能用，但是有些地方他还没有讲明白，如果贸然添加这样的一个区块代码，不一定能实现滚动效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
mui框架内容区域滚动部分详解注意事项
qq_34559257的博客
06-12 6216
（1）下拉刷新完成后要结束下拉刷新 不仅要渲染页面还需要调用结束下拉刷新的方法mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();（2）上拉加载提示没有数据的时候 如果下拉刷新需要再次能够上拉加载 在下拉刷新的回调函数还需要重置上拉加载mui('.mui-scroll-wrapper').pullRefresh().ref...
mui框架搭建的APP页面区域滚动失效
纸上得来终觉浅，绝知此事要躬行
11-17 1427
最近被 mui 框架搞得有点晕，mui 框架的上拉加载和下拉刷新 使得当前区域的滚动行为失效。这是我摸索出来的一种解决方法，如果有更好的方式的话，请不吝赐教！ 只要记住： ①position 要设置为 absolute，其实它原来默认就是absolute。 ②mui-scroll-wrapper 只对它下面的第一个子元素有作用。 ③touch-action: none 详细请看Unable...
MUI scroll(区域滚动)问题
你是欢喜的年少
03-30 5870
                                                 MUI scroll(区域滚动)问题 1）在手机APP上，我们需要进行组件的滑动或者定位，可能会出现滑动方法不起作用。 例如： 功能：滚动到特定位置 方法：scrollTo( xpos , ypos [, duration] ) 案例：mui('.mui-scroll-wrapper')....
Vue cli+mui 区域滚动
山外小楼
08-21 3826
vue cli+mui配合使用达到区域滚到的效果 ，方法如下 第一步 引入mui css js @import url("/static/mui.min.css");JS import mui from '../../../static/mui.min.js'； 第二步 写结构  mui的区域滚动结构是这样的 *写需要滚动的内容 下面粘贴我代码的一部分
MUI框架：栅格系统 + grid宫格布局 - 案例篇
草巾冒小子的博客
05-13 8703
MUI框架 · 自定义宫格布局 · 应用案例： 通过使用MUI框架的 栅格系统 + grid宫格布局 ，覆盖源码样式，以达到完美的页面效果。 效果图： 点击动画效果不再演示，具体效果参考源码效果！ 全部实例代码： <!doctype html> <html> <head> <meta charset="UTF-8"> <...
mui scroll滚动回到原点
最新发布
07-13
mui scroll 是一款轻量级的移动端触摸滑动库，如果你想要让滚动条滚动回原点，你可以使用它的`scrollTo()`方法，设置目标位置为0。例如，在JavaScript中，可以这样做： ```javascript mui('#scrollContainer')....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值