mui 滑动切换相应内容的js案例

最新推荐文章于 2021-11-10 20:55:17 发布
最新推荐文章于 2021-11-10 20:55:17 发布
阅读量4k 收藏 1
点赞数 1
分类专栏： js 前端 文章标签： js 滑动效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzfyy/article/details/73321939
版权
本文介绍了一种使用mui库结合zepto.js实现滑动切换内容的JavaScript案例。通过引入必要的css和js文件，配置html结构，以及编写js代码监听滑动事件，实现在滑动过程中切换不同内容区域的效果。示例中详细展示了如何添加和激活对应的滑动项和内容页，为开发者提供了参考。
摘要由CSDN通过智能技术生成

1.首先引入相关css以及js文件

mui.min.css

mui.min.js

zepto.min.js

icons-extra.css


2.html相关代码

<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="slider" class="mui-slider">
<div class="mui-slider-group" style="height:64px;text-align:center;">
<div id="item1111" class="mui-slider-item">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
aaa
</li>
</ul>
</div>
</div>
</div>

<div id="item2222"

最低0.47元/天 解锁文章
chenzfyy
关注
专栏目录
android 左右滑动切换页面
03-31
左右滑动切换Activity ，类似网易客户端左右划的效果。
mui 滑动切换界面
u013720726的博客
09-21 4101
mui中实现滑动切换的方式总的来说就只有两种SinglePage模式　　不同的界面或图片在同一个html文件中，放在不同的div标签中，通过js脚本来控制滑动（如swiper.js）。这种方式适合于图片轮播，或者界面较为简单的情况。优势在于不同界面之间传递参数容易。多webview模式  这种情况下有多个webview，适用于每个界面较为复杂的情况。优势在于不同webview之间相互隔离，易于分别开
mui子页面左右滑动和父级导航切换效果
weixin_42105261的博客
09-07 3581
定义第一页内容 //_self当前页面 _next下一个页面 var _self, _next; mui.plusReady(function() { _self = plus.webview.currentWebview();//获取当前webview窗口 ...
mui tab点击切换滑动 内容页面左右滑动效果
qq_37916164的博客
08-11 1450
示例代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <lin
mui webview如何取消左右滑动切换页面
changysys的博客
07-12 2756
将源码包webvviewGroup.js中的'moveMode':'followFinger'注掉或者删除即可。大概在115行。
mui选项卡切换和下拉刷新加载数据列表代码.zip
07-11
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui....
mui app 案例
11-30
《基于mui技术构建移动应用的实战案例——仿味觉大师前端界面》 在移动互联网的快速发展下，原生应用的开发成本与复杂性使得开发者开始寻找更为便捷的跨平台解决方案。MUI，作为一款轻量级的前端框架，以其优秀的...
mui点餐案例
06-02
【标签】"mui案例"明确了这个压缩包中的内容是关于mui框架的应用展示，对于想要了解和掌握mui的人士来说，这是一个很好的参考资源。通过学习案例，可以了解到mui如何处理常见的UI元素、交互逻辑以及数据管理等问题。...
mui互助案例
06-20
mui框架是基于zepto.js和fastclick.js优化的，主要针对移动设备进行性能优化，提供了包括下拉刷新、上拉加载、侧滑删除、选项卡、弹出层、滑动切换等多种组件。它的设计理念是简洁、高效，旨在降低移动端开发的...
仿微信6.0左右滑动渐变切换效果[大陆第一人]
10-29
介绍：BottomMenuSlideGradientSwipe是一个仿微信6.0左右滑动渐变切换效果的demo，特分享与大家探讨 [目前上面只有一个自己写的自定义AlertDialog对话框，有兴趣的朋友可以看一下，当然肯定没得前段时间出来的那个专门的动画对话框好哈] 群里很多网友多次讨论过新版微信6.0的滑动渐变导航[底部菜单渐变切换]的效果怎么做的，今儿个空了在网上搜了一下，几乎没搜到啥有用信息，唯独有一个说的是用高斯函数对图片进行渐变显隐藏[通过透明度]，但这并不能达到效果。 你是不是也想知道微信开发者是怎么实现的呢？那么请往下看…… http://blog.csdn.net/lijunhuayc/article/details/40543237
左右滑动 及分页
07-04
左右滑动，加分页，注意：分页在模拟器反应比较慢，放到手机上测试，还是比较快的
关于mui Div模式选项卡 JS主动触发切换指定选项卡
https://syra-ti.icu
11-07 2580
需要先触发touchstart事件（旧版本需要先触发mousedown事件） mui.trigger($('.mui-tab-item').eq(1)[0],'touchstart'); mui.trigger($('.mui-tab-item').eq(1)[0],'tap') 源代码尚未研究 以上为解决方案 2018-3-30 PS: 发现好像只要改一下mui...
mui实现可以左右滑动的导航栏
Yanfengting的博客
02-16 3575
源码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-
mui滚动tab切换问题
webBess的博客
07-20 2720
根据ui设计图 中间有需要做左右滑动tab切换的问题，选择用mui里的滑动tab切换组件来做这部分的效果，但是相应地也产生了一系列的问题。 滚动内容部分需要用mui-scroll-wrapper&gt;mui-scroll这样的结构包裹起来，如果直接在.mui-slider-item里面放内容，在上下滑动的时候会容易飘而滚向下一个tab内容，但是加了mui-scroll-wrapper&gt;...
MUI实现滑动一定距离再显示内容的效果
浪子四方
08-28 1008
引言 滑动一定距离后再显示在开发过程中也是挺常见的，比如在一个上拉加载的列表中，当我们滑动到底部显示更多数据时，在底部可以显示一个按钮，当我们点击按钮时可以快速自动回到顶部的功能，当然啦，不单单只有这一个使用场景，其他的功能就要结合业务来实现了。 实现的效果 源码 <!doctype html> <html> <head> <me...
CSS3 3D转换
VVVZCS的博客
09-20 1402
perspective （1）perspective值越大，产生3D变换的时候会感觉距物体越远（不可为负数或者0，如果设置为0或者负数，那么就相当于人观察一个物体眼睛贴上去或者陷进去，就不会感觉到变化了）（也不能为百分比） （2）一般为父元素设置perspective属性，设置完之后，如果其子元素设置了3D转换，那么就可以显示出来 具体效果看下面的rotate 3D变换 1，rotate ...
CSS：3D效果（位移、旋转）
李建雨的博客
11-10 1776
浏览器平面为二维平面，以浏览器可视区域左上角为原点，X轴为左上到右上，正方向为右；Y轴为左上到左下，正方向为下。 要想实现3D效果，我们需要引入Z轴，这条Z轴垂直于屏幕，以出平面为正方向。 transform产生的位移和旋转都不脱标！！！ 1、3D位移 3D位移函数与2D位移一样，需要使用transfrom变量，变量值有如下几个： 1、transform:translateX(位移量) 2、transform:translateY(位移量) 3、transform:translateZ(位移量)
css3之transform详解
五月兰博客
07-22 882
Transform，顾名思义，是“变形”之意，它是CSS3中重要的动画属性之一，包含“旋转rotate”、“扭曲skew”、“缩放scale”、“移动translate”以及“矩阵变形matrix”5种变形方式。 基本语法： transform ： none | none：表示不变形； ：表示一个或多个变换函数，指rotate 、 scale 、 skew 、transl
mui tab 不设置左右滑动切换
最新发布
05-18
如果你想禁止 MUI Tab 组件的左右滑动切换功能，可以通过以下两种方法实现： 1. 使用 CSS 样式 在 MUI Tab 组件所在的页面或组件中，添加如下 CSS 样式： ``` .mui-slider-handle { pointer-events: none; } ``` 这样可以禁用滑动切换功能，但仍可通过点击 Tab 来进行切换。 2. 使用 `mui-scroll-wrapper` 组件 在 MUI Tab 组件所在的页面或组件中，使用 `mui-scroll-wrapper` 组件来包裹 Tab 组件，如下所示： ```html <div class="mui-scroll-wrapper"> <!-- Tab 组件 --> <div class="mui-slider"> <div class="mui-scroll"> <a class="mui-control-item mui-active" href="#tab1">Tab 1</a> <a class="mui-control-item" href="#tab2">Tab 2</a> <a class="mui-control-item" href="#tab3">Tab 3</a> </div> </div> </div> ``` 然后在 JavaScript 中初始化 `mui-scroll-wrapper` 组件，如下所示： ```javascript mui('.mui-scroll-wrapper').scroll({ scrollX: false, // 禁止水平滑动 scrollY: true, // 允许垂直滑动 indicators: false // 禁用下拉刷新和上拉加载提示 }); ``` 这样可以完全禁止滑动切换功能，只能通过点击 Tab 来进行切换。同时，也可以通过 `scrollY` 属性来控制是否允许垂直滑动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值