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

最新推荐文章于 2024-10-03 12:14:00 发布
最新推荐文章于 2024-10-03 12:14:00 发布
阅读量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 591
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述当我们打开很多APP时映入我们眼帘的是页面上方的...
mui刷新不显示动画_mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)...
weixin_39841825的博客
12-24 204
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框架实践：图片轮播与本地登录功能实现
最新发布
weixin_31800911的博客
10-03 710
本文还有配套的精品资源，点击获取 简介：本项目通过MUI框架，实现了移动应用开发中的图片轮播和本地登录功能。图片轮播组件包括自动播放、指示器、多样动画效果、手势操作和自适应布局，以提供优秀的用户体验。本地登录机制利用浏览器存储实现快速访问和离线可用性，并通过加密提升数据安全。项目文件结构清晰，包含HTML、CSS、JavaScript及资源文件，便于代码管理与维护。 ...
MUI框架div模拟按钮（日期选择器）导致双击才能弹出选择框，移动端Web不支持dblclick双击的问题。
流都的博客
05-15 1877
一些前任项目遗留的问题，mui坑太多，不知道为什么要用div模拟日期选择的button按钮，导致使用时点击2次才能弹出日期选择框★单击绑定双击想法，无法实现首先，双击这种交互原生不支持；Android有实现双击缩放查看图片的仿微信照片查看器如PhotoView，IOS暂未发现；IOS微信客户端由UIWebview升级为WKWebview，对于Web端开发有什么影响？IOS网页开发适配指南原本的实现...
MUI-button（按钮），带图标，图标可居左/居右
LzzMandy的博客
12-13 6083
一般图标包括首页、搜索、添加、删除等，分别对应的类如下表所示： 图标类，默认图标居左 mui-icon mui-icon-home 首页 mui-icon mui-icon-search 搜索 mui-icon mui-icon-plus 添加 mui-icon mui-icon-trash 删除 mui-icon ...
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. **手势支持...
mui获取版本号更新APP以及点击图片查看大图功能
08-15
hbuilder打包APP后根据版本号更新，以及简单的点击图片查看大图
mui+vue轮播图
01-03
Mui+Vue，轮播图，示例一，示例二，三个版本，可以参考使用
UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)
六六的博客
11-13 1079
在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求。 第一种方式是通过设置按钮中图片文字的偏移量。通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下： /*!**方式一***/ - (void)updateBtnStyle_rightImage:(UIButton *)btn { CGFloat btnImageWidth...
MUI-button（按钮）,块级按钮
LzzMandy的博客
12-13 6693
本文主要介绍块级按钮，它和普通按钮的不同之处在于，块级按钮是填充整行的，而普通按钮可以根据内容自适应宽度。 块级按钮，仅需增加.mui-btn-block类即可让其变成块； 若想带有底色，则增加.mui-btn-颜色值或.mui-btn-场景 若想无底色、有边框，再增加.mui-btn-outlined类即可 代码如下： &lt;!DOCTYPE html&gt; &lt;html...
MUI 图文卡片（左布局）仿通讯录
机智的奎哥的博客
04-22 401
<li class="mui-table-view-cell mui-media" > <a class="mui-navigate-right" id="div_list" href="tel:"> <img class="mui-...
html mui按钮居中,mui实现下方突出大按钮图标
weixin_35356909的博客
06-26 1033
mui实现下方突出大按钮图标所属分类：[APP]|创建时间：2017-11-16|文章属性：原创|文章来源：http://windfly.cn|作者：windfly#原理> 使用nativeView原生画图，第一个画原型按钮和外扩边线，第二个画其他按钮#参考画图代码##画图代码```var self = plus.webview.currentWebview(),leftPo...
mui框架
热门推荐
肉嘟嘟的博客
10-16 1万+
1 MUI介绍 =======1.1 MUI是什么，解决了什么问题。（1）性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有（如果开发者需要解决这些问题，需要处理很多兼容性问题，需要花费大把的时间和精力）；
mui初级入门教程（二）— html5+ webview 底部栏用法详解
weixin_33714884的博客
05-25 313
文章来源：小青年原创发布时间：2016-05-19关键词：mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io... 写在前面 本系列文章我们将利用mui基于网易云音乐API实现一个音乐播放器APP，同时基于环形或者融云实现聊天功能。作为本系列文章的第一篇，本文会详细讲解...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值