MUi-个人整理（图片自动轮播 上、下拉刷新 点击事件）

最新推荐文章于 2021-08-04 11:29:42 发布
最新推荐文章于 2021-08-04 11:29:42 发布
阅读量4.7k 收藏 3
点赞数
分类专栏： js插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyq04551/article/details/76766866
版权 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>mui-轮播-刷新</title>
</head>
<link rel="stylesheet" href="css/mui.min.css" />
<script src="js/jquery.js"></script>
<script src="js/mui.js"></script>
<style>
	a,body,div,html,img,li,span,ul{margin:0;padding:0}body{background-color:#fff;font-size:1pc;font-family:Microsoft YaHei}
	.top_box img{width:100%;height:92.5px}body{width:100%;height:100%}html{width:100%;height:100%}.spec_content{margin:0 auto;margin-top:9px;width:92%;height:70px;height:84px;font-size:16px}.bancontent_box{width:100%;border-top:1px solid #E7E7E7}.bancontent{margin:0 auto;width:92%;height:93px;font-size:16px}.bancontent_left_content{display:block;overflow:hidden;margin-top:12px;width:68%;height:41px;text-overflow:ellipsis}.bancontent_img>div{float:right;margin-top:-45px;width:28%;height:72px}#wrapper{position:absolute;display:inline-block;width:100%;height:97%}
</style>
<body>
    <!--下拉刷新容器-->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--数据列表-->
            <!--顶部轮播图片-->
            <div class="top_box">
                <!--官方写法 页面上会显示一个 开关按钮-->
                <!--<div class="mui-content">
                            <ul class="mui-table-view mui-table-view-chevron">
                                <li id="switch" class="mui-table-view-cell">
                                    定时轮播
                                    <div class="mui-switch mui-switch-mini mui-active">
                                        <div class="mui-switch-handle"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>-->
    
                <!--定时轮播-->
                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group mui-slider-loop">
                        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <!-- <img src="img/1.jpg"> -->
                                <div style="width: 100%; height: 150px;background: rebeccapurple;text-align: center;line-height: 150px;">第一张</div>
                            </a>
                        </div>
                        <!-- 第一张 -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <!-- <img src="img/1.jpg"> -->
                                <div style="width: 100%; height: 150px;background: rebeccapurple;text-align: center;line-height: 150px;">第一张</div>
                            </a>
                        </div>
                        <!-- 第二张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <!-- <img src="img/4.jpg"> -->
                                <div style="width: 100%; height: 150px;background: red;text-align: center;line-height: 150px;">第二张</div>
                            </a>
                        </div>
                        <!-- 第三张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <!-- <img src="img/1.jpg"> -->
                                <div style="width: 100%; height: 150px;background: blue;text-align: center;line-height: 150px;">第三张</div>
                            </a>
                        </div>
                        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <!-- <img src="img/4.jpg"> -->
                                <div style="width: 100%; height: 150px;background: rebeccapurple;text-align: center;line-height: 150px;">第一张</div>
                            </a>
                        </div>
                    </div>
                    <!--图片下小圆点显示-->
                    <div class="mui-slider-indicator">
                        <div class="mui-indicator mui-active"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                        <!-- <div class="mui-indicator"></div> -->
                    </div>
                </div>
            </div>
            <div class="spec_content">
                <span>
                    <g>专题导读</g>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
            </div>
            <div class='bancontent_box'>
                <!--公共的-->
                <div class='bancontent'>
                    <div class='bancontent_left_content'>
                        <span class='bancontent_left_content_font'>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
                    </div>
                    <span class="bancontent_img">
                        <div></div>
                    </span>
                    <span class="bancontent_from">啦啦啦1</span>
                    <span class="bancontent_time">2017-08-04</span>
                </div>
    
                <div class='bancontent'>
                    <div class='bancontent_left_content'>
                        <span class='bancontent_left_content_font'>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
                    </div>
                    <span class="bancontent_img">
                        <div></div>
                    </span>
                    <span class="bancontent_from">啦啦啦2</span>
                    <span class="bancontent_time">2017-08-04</span>
                </div>
    
                <div class='bancontent'>
                    <div class='bancontent_left_content'>
                        <span class='bancontent_left_content_font'>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
                    </div>
                    <span class="bancontent_img">
                        <div></div>
                    </span>
                    <span class="bancontent_from">啦啦啦3</span>
                    <span class="bancontent_time">2017-08-04</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
	// $(function(){
		//初始化--有好多参数（可以参考 官方api "http://dev.dcloud.net.cn/mui/pulldown/"）
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {//下拉 
                    // auto:true,//可选,默认false.自动上拉加载一次
                    contentrefresh: '正在加载下拉...',
                    callback: pulldownRefresh,
				},
				up: {//上拉
					auto:false,//可选,默认false.自动上拉加载一次
					contentrefresh: '正在加载上拉...',
					callback: pullupRefresh,
					contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				}
				
			}
		});
        //下拉刷新具体业务实现
        function pulldownRefresh() {
            setTimeout(function() {
                //do something
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh((true)); //参数为true代表没有更多数据了。
            }, 1500);
        }
        //上拉加载具体业务实现
        function pullupRefresh() {
            setTimeout(function() {
                //do something
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((true)); //参数为true代表没有更多数据了。
            }, 1500);
        }
        //注意 点击事件一定要 按照mui的方法写  如果写click会不生效
        mui(".bancontent").on("tap","div span",foo_1);//点击事件
        function foo_1(){
            alert("点击列表生效了")
        }
			
        //----------------------图片轮播-------------------------------------
        //进入页面自动轮播  简单明了
        var slider = mui("#slider");
        var gallery = mui('.mui-slider');  
        gallery.slider({  
            interval:1000//自动轮播周期，若为0则不自动播放，默认为0；  
        });  
	// });
</script>
 
</html>

 

约德尔蒙
关注
专栏目录
[MUI专题] 如何制作MUI静态页面的轮播图
算法与编程之美
03-14 571
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述当我们打开很多APP时映入我们眼帘的是页面上方的...
mui刷新不显示动画_mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)...
weixin_39841825的博客
12-24 193
mui-slider问题:动态给mui的图片轮播添加图片，轮播不滚动.解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 3000});添加在ajax构建数据之后。备注:图片轮播如何初始显示第2张图片,mui('.mui-slider').slider().gotoItem(1),有滑动效果mui('.mui-slider').slider().go...
mui个人项目程序
09-11
个人仿照案例开发的mui程序，是客户端/服务器程序，文件夹中有客户端代码、服务器端代码和数据库文件，设置好服务器，再修改访问网址应该就可以直接运行，以后移动开发就仿照这个。
MUI列表条目点击事件代码
03-04
本项目是MUI列表条目点击事件的示例代码，目的是让大家了解MUI的点击事件该怎么写。
三.MUI - accordion（折叠面板）、button（按钮）
梅某某
04-07 2878
1、折叠面板 折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下： class="mui-table-view"> class="mui-table-view-cell mui-collapse"> class="mui-navigate-right" href="#">面板1 class="mui-collapse-content"
html mui按钮居中,mui实现下方突出大按钮图标
weixin_35356909的博客
06-26 995
mui实现下方突出大按钮图标所属分类：[APP]|创建时间：2017-11-16|文章属性：原创|文章来源：http://windfly.cn|作者：windfly#原理> 使用nativeView原生画图，第一个画原型按钮和外扩边线，第二个画其他按钮#参考画图代码##画图代码```var self = plus.webview.currentWebview(),leftPo...
mui-Shopping.zip
07-22
mui框架提供了如轮播图、栅格系统、下拉刷新、上拉加载等组件，帮助开发者快速搭建这些页面。例如，商品列表可能使用了mui的网格布局和下拉刷新功能，确保用户在浏览过程中有流畅的滚动体验。 2. **交互设计**：在...
mui-oa-app:mui的一个办公oa app
05-18
使用HTML5 和MUI 构建的一个办公OA APP 实现了引导页 自动更新 上拉加载 下拉刷新 上传图片 本地数据缓存 消息推送 轮播 与后台数据交互 等等 是一个已经在IOS上架的成熟产品 安卓平台太多就没有上架
MUI框架--页面init事件
02-09
MUI框架提供了一系列组件，如轮播图、下拉刷新、上拉加载等，它们也可以在`init`事件中进行初始化。例如，如果页面包含一个轮播图组件，可以在`myInitFunction`中加入如下代码： ```javascript mui('.mui-slider')....
muidemo整理测试
02-16
3. **JavaScript交互**：在MUIMyDemo中，JavaScript文件通常用于实现组件的动态交互逻辑，如按钮点击事件的响应、下拉刷新的触发和数据加载等。熟悉这些脚本可以加深对MUI事件绑定和数据处理的理解。 4. **手势支持...
文字上下轮播滚动,纯js实现，结构简单明了
06-28
文字上下轮播滚动，纯js实现，结构简单明了，几行代码即可
mui图片放大缩小的js和css文件下载
03-27
用于mui手机端，图片点击放大缩小；需要映入三个文件，属性img标签内加入，js最后位置加入mui.previewImage();
html5+mui app（一）
weixin_45338913的博客
03-05 2880
html+mui 本文仅用于个人学习，感谢批评指正 webview Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。 方法： all:获取所有Webview窗口 close:关闭Webview窗口 create：创建新的Webview窗口 currentWebview:获取当前窗口的WebviewObject对象 getDis...
mui 移动端点击小图预览放大
Khun_HWJ的博客
07-10 451
第一步：引用mui的css和js <link rel="stylesheet" href="/mobile/libs/mui/css/mui.min.css" > <link rel="stylesheet" href="/mobile/libs/mui/js/imageview/imageview.css" > <link rel="stylesheet" href...
mui框架
热门推荐
肉嘟嘟的博客
10-16 1万+
1 MUI介绍 =======1.1 MUI是什么，解决了什么问题。（1）性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有（如果开发者需要解决这些问题，需要处理很多兼容性问题，需要花费大把的时间和精力）；
mui初级入门教程（二）— html5+ webview 底部栏用法详解
weixin_33714884的博客
05-25 292
文章来源：小青年原创发布时间：2016-05-19关键词：mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io... 写在前面 本系列文章我们将利用mui基于网易云音乐API实现一个音乐播放器APP，同时基于环形或者融云实现聊天功能。作为本系列文章的第一篇，本文会详细讲解...
MUI框架div模拟按钮（日期选择器）导致双击才能弹出选择框，移动端Web不支持dblclick双击的问题。
流都的博客
05-15 1864
一些前任项目遗留的问题，mui坑太多，不知道为什么要用div模拟日期选择的button按钮，导致使用时点击2次才能弹出日期选择框★单击绑定双击想法，无法实现首先，双击这种交互原生不支持；Android有实现双击缩放查看图片的仿微信照片查看器如PhotoView，IOS暂未发现；IOS微信客户端由UIWebview升级为WKWebview，对于Web端开发有什么影响？IOS网页开发适配指南原本的实现...
mui.previewimage 图片预览，点击图片放大缩小
Cc
08-04 1245
废话不多说，直接上干货！ 1.mui页面引入css/js <link href="../css/mui.css" rel="stylesheet" type="text/css" /> <link href="../css/mui.previewimage.css" rel="stylesheet" type="text/css" /> <script src="../js/mui.js"></script> <script src="../js/
MUI-button（按钮），带图标，图标可居左/居右
LzzMandy的博客
12-13 6027
一般图标包括首页、搜索、添加、删除等，分别对应的类如下表所示： 图标类，默认图标居左 mui-icon mui-icon-home 首页 mui-icon mui-icon-search 搜索 mui-icon mui-icon-plus 添加 mui-icon mui-icon-trash 删除 mui-icon ...
MUI上拉加载与下拉刷新实现教程
例如，需要在列表容器上添加特定的类名，如`mui-pull-refresh`和`mui-scroll-wrapper`，并在JavaScript中注册`mui.pullRefresh()`和`mui.pullLoad()`方法。同时，需要确保在数据加载完成后，调用对应的结束方法，如`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值