html前端 - 文章分类 - 友帅老师

商城、电商类 App 或小程序首页霸屏广告插件

摘要：本插件是一个基于 UniApp 和 Vue3 实现的点击弹出霸屏广告功能组件，具有流畅的过渡动画、倒计时关闭和点击跳转等功能，适配多端运行环境。功能说明这个霸屏广告组件具有以下特点：触发方式：通过一个醒目的按钮触发广告弹窗，按钮包含图标和文字提示动画效果：广告弹出时从底部滑入，带有平滑过渡阅读全文

posted @ 2025-08-30 16:25 友帅老师阅读(4) 评论(0) 推荐(0)

MUI从入门到项目实战（十七）（MUI上拉加载）

摘要：概述 mui的上拉加载和下拉刷新类似，都属于pullRefresh插件，使用过程如下： 1、页面滚动到底，显示“正在加载...”提示（mui框架提供） 2、执行加载业务数据逻辑（开发者提供） 3、加载完毕，隐藏"正在加载"提示（mui框架提供）初始化初始化方法类似下拉刷新，通过mui.init方阅读全文

posted @ 2019-05-31 18:41 友帅老师阅读(605) 评论(0) 推荐(0)

MUI从入门到项目实战（十六）（MUI下拉刷新）

摘要：概述为实现下拉刷新功能，大多数 H5 框架都是通过 DIV 模拟下拉回弹动画，在低端 android 手机上，DIV 动画经常出现卡顿现象（特别是图文列表的情况); mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问题，并且拖动效果更加流畅这里提供两种模式的下拉刷新，以阅读全文

posted @ 2019-05-31 18:40 友帅老师阅读(470) 评论(0) 推荐(0)

MUI从入门到项目实战（十四）（MUI事件之事件绑定、事件取消、事件触发）

摘要：一、事件绑定除了可以使用addEventListener()方法监听某个特定元素上的事件外，也可以使用.on()方法实现批量元素的事件绑定。点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面二、事件取消使用on()方法绑定事件后，若希望取消绑定，则可以使用阅读全文

posted @ 2019-05-31 17:40 友帅老师阅读(723) 评论(0) 推荐(0)

MUI从入门到项目实战（十五）（MUI事件之自定义事件）

摘要：在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题；但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串；为简化开发，mui框架在evalJS方法的基础上，封装了自定义阅读全文

posted @ 2019-05-31 17:40 友帅老师阅读(215) 评论(0) 推荐(0)

MUI从入门到项目实战（十三）（MUI窗口管理之打开新页面、关闭页面、预加载）

摘要：一、打开新页面做web app，一个无法避开的问题就是转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁阅读全文

posted @ 2019-05-31 17:38 友帅老师阅读(1571) 评论(0) 推荐(1)

MUI从入门到项目实战（十二）（MUI窗口管理之页面初始化、创建子页面）

摘要：页面初始化在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：创建子页面在mobile 阅读全文

posted @ 2019-05-31 17:37 友帅老师阅读(1552) 评论(0) 推荐(0)

MUI从入门到项目实战（十一）（MUI组件之scroll、slide、switch）

摘要：一、scroll 在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题： Android平台4.0以下不支持div滚动 Android平台4.0以上支持div滚动，但不显示滚动条弹出层的div滚动在iOS平台存在事件透传的问题因此，mui额外提供了区域滚动组件，使用时需要阅读全文

posted @ 2019-05-30 16:19 友帅老师阅读(1852) 评论(0) 推荐(0)

MUI从入门到项目实战（十）（MUI组件之transparentBar、radio、range）

摘要：一、transparentBar 当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。透明标题栏组件比较简单，只需要在header组件上添加.mui-bar-transparent类即可，如下为示例代码如果需要个性化定制可通过data-*属性或者j 阅读全文

posted @ 2019-05-30 15:49 友帅老师阅读(363) 评论(0) 推荐(0)

MUI从入门到项目实战（九）（MUI组件之popover、pipcker、progressbar）

摘要：一、popover mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中要显示、隐藏如上菜单，mui推荐使用锚点方式，例如：点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；这种使用方式最为简洁。若希望通阅读全文

posted @ 2019-05-30 15:24 友帅老师阅读(622) 评论(0) 推荐(0)

MUI从入门到项目实战（八）（MUI组件之mask、number-box、offcanvas）

摘要：一、mask 在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙阅读全文

posted @ 2019-05-30 14:27 友帅老师阅读(538) 评论(0) 推荐(0)

MUI从入门到项目实战（七）（MUI组件之icon、input、list）

摘要：一、icon mui默认提供了手机App开发常用的字体图标代码如下：二、input 所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。将 label 元素和上述控件控件包裹在.mui-input-group中可阅读全文

posted @ 2019-05-30 12:03 友帅老师阅读(441) 评论(0) 推荐(0)

MUI从入门到项目实战（六）（MUI组件之dialog、gallery、grid）

摘要：一、dialog 创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。代码如下：二、gallery 图片轮播继承自slide插件，因此其DOM结构、事件阅读全文

posted @ 2019-05-30 11:49 友帅老师阅读(816) 评论(0) 推荐(0)

MUI从入门到项目实战（五）（MUI组件之buttons、cardview、checkbox）

摘要：一、buttons mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一阅读全文

posted @ 2019-05-30 11:04 友帅老师阅读(327) 评论(0) 推荐(0)

MUI从入门到项目实战（四）（MUI组件之accordion、actionsheet、badge）

摘要：一、accordion 折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：在index.html中《主界面具体展示内容》下输入快捷键 maccordion 创建折叠面板二、actionsheet actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actions 阅读全文

posted @ 2019-05-30 10:29 友帅老师阅读(291) 评论(0) 推荐(0)

MUI从入门到项目实战（三）增加自定义icon图标

摘要：本节我们会将上节新建的html进行改造首先，修改底部导航浏览器访问阿里巴巴图标库网，网址为：https://www.iconfont.cn/ 查找自己需要的图标下载图标代码修改css 为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得ur 阅读全文

posted @ 2019-05-29 14:50 友帅老师阅读(2518) 评论(1) 推荐(0)

MUI从入门到项目实战（二）MUI介绍及入门程序

摘要：一、介绍说起mui，不得不提h5+,HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。二、开发工具 HBuilder内置HTML5+ APP 阅读全文

posted @ 2019-05-29 14:18 友帅老师阅读(1103) 评论(0) 推荐(0)

MUI从入门到项目实战（一）学习路线

摘要：作为一名web开发人员和软件架构师，掌握大前端技术已是迫在眉睫，在此分享下我对MUI的学习路线，仅作为参考一、前置条件在介绍MUI学习路线前，应该对基本的网页开发有所了解，对html、css、js有一定的基础。二、工具的选择建议：sublim、vscode、hbuilder 三、模拟器这里阅读全文

posted @ 2019-05-29 09:27 友帅老师阅读(283) 评论(0) 推荐(0)

web前端开发-之小米商城学习笔记

摘要：第一课：顶部菜单栏使用工具： VSCode 工具下载地址：https://code.visualstudio.com/ 操作步骤：第一步：新建目录第二步：打开vscode ，打开目录第三步：新建js、css、img、index.html 修改index.html代码如下： <!doctyp 阅读全文

posted @ 2019-05-17 17:00 友帅老师阅读(1247) 评论(0) 推荐(0)

文章分类 - html前端