10087人阅读
Hbuilder（4）
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&顶部选项卡-可左右拖动&/title&
&meta name=&viewport& content=&width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no&&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
&link rel=&stylesheet& href=&css/mui.min.css&&
&link rel=&stylesheet& type=&text/css& href=&css/app.css& /&
.mui-control-content {
background-color:
min-height: 215
.mui-control-content .mui-loading {
margin-top: 50
&header class=&mui-bar mui-bar-nav&&
&a class=&mui-action-back mui-icon mui-icon-left-nav mui-pull-left&&&/a&
&h1 class=&mui-title&&顶部选项卡-可左右拖动(div)&/h1&
&div class=&mui-content&&
&div id=&slider& class=&mui-slider&&
&div id=&sliderSegmentedControl& class=&mui-slider-indicator mui-segmented-control mui-segmented-control-inverted&&
&a class=&mui-control-item& href=&#item1mobile&&
&a class=&mui-control-item& href=&#item2mobile&&
&a class=&mui-control-item& href=&#item3mobile&&
&div id=&sliderProgressBar& class=&mui-slider-progress-bar mui-col-xs-4&&&/div&
&div class=&mui-slider-group&&
&div id=&item1mobile& class=&mui-slider-item mui-control-content mui-active&&
&div id=&scroll1& class=&mui-scroll-wrapper&&
&div class=&mui-scroll&&
&ul class=&mui-table-view&&
&li class=&mui-table-view-cell&&
第一个选项卡子项-1
&li class=&mui-table-view-cell&&
第一个选项卡子项-2
&li class=&mui-table-view-cell&&
第一个选项卡子项-3
&li class=&mui-table-view-cell&&
第一个选项卡子项-4
&li class=&mui-table-view-cell&&
第一个选项卡子项-5
&div id=&item2mobile& class=&mui-slider-item mui-control-content&&
&div id=&scroll2& class=&mui-scroll-wrapper&&
&div class=&mui-scroll&&
&div class=&mui-loading&&
&div class=&mui-spinner&&
&div id=&item3mobile& class=&mui-slider-item mui-control-content&&
&div id=&scroll3& class=&mui-scroll-wrapper&&
&div class=&mui-scroll&&
&div class=&mui-loading&&
&div class=&mui-spinner&&
&!--为选项卡选择样式--&
&h5 class=&mui-content-padded&&Color&/h5&
&div class=&mui-card&&
&form class=&mui-input-group&&
&div class=&mui-input-row mui-radio&&
&label&&span class=&mui-bg-primary& style=&display:width:25height:25&&&/span&
&input name=&radio1& type=&radio& checked value=&primary&&
&div class=&mui-input-row mui-radio&&
&label&&span class=&mui-bg-positive& style=&display:width:25height:25&&&/span&
&input name=&radio1& type=&radio& value=&positive&&
&div class=&mui-input-row mui-radio&&
&label&&span class=&mui-bg-negative& style=&display:width:25height:25&&&/span&
&input name=&radio1& type=&radio& value=&negative&&
&script src=&../js/mui.min.js&&&/script&
mui.init({
swipeBack: false
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
&!--根据选择获取各个面板--&
var html2 = '&ul class=&mui-table-view&&&li class=&mui-table-view-cell&&第二个选项卡子项-1&/li&&li class=&mui-table-view-cell&&第二个选项卡子项-2&/li&&li class=&mui-table-view-cell&&第二个选项卡子项-3&/li&&li class=&mui-table-view-cell&&第二个选项卡子项-4&/li&&li
class=&mui-table-view-cell&&第二个选项卡子项-5&/li&&/ul&';
var html3 = '&ul class=&mui-table-view&&&li class=&mui-table-view-cell&&第三个选项卡子项-1&/li&&li class=&mui-table-view-cell&&第三个选项卡子项-2&/li&&li class=&mui-table-view-cell&&第三个选项卡子项-3&/li&&li class=&mui-table-view-cell&&第三个选项卡子项-4&/li&&li
class=&mui-table-view-cell&&第三个选项卡子项-5&/li&&/ul&';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2;
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
&!--为选项卡选择样式--&
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：137738次
积分：2541
积分：2541
排名：第14039名
原创：92篇
转载：132篇
(3)(4)(1)(9)(2)(2)(1)(5)(11)(10)(7)(2)(13)(4)(12)(12)(9)(6)(1)(4)(10)(7)(45)(6)(5)(1)(4)(1)(37)(1)60442人阅读
web前端（15）
mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问
关于mui页面的dom，你需要知道如下规则。
固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
### 一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：
.mui-bar-nav ~ .mui-content {
padding-top: 44
.mui-bar-footer ~ .mui-content {
padding-bottom: 44
.mui-bar-tab ~ .mui-content {
padding-bottom: 50
你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。
始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
页面跳转：抛弃href跳转
当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用[mui.openWindow方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；扩展阅读：
页面关闭：勿重复监听backbutton
mui框架自动封装了逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
点击：忘记click
快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：
element.addEventListener('tap',function(){
//点击响应逻辑
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1293900次
积分：9230
积分：9230
排名：第1905名
原创：114篇
评论：514条
(1)(1)(5)(2)(1)(1)(3)(1)(1)(1)(6)(6)(1)(1)(3)(3)(3)(1)(1)(2)(1)(1)(1)(2)(2)(1)(2)(1)(1)(2)(3)(7)(6)(2)(7)(8)(13)(10)(9)WEB 学习（4）
版权声明：本文为 wintersmilesb101 -（个人独立博客–
欢迎访问）博主原创文章，未经博主允许不得转载。
最近想入坑前端开发，也是为了开发 App 更快更接地气。在各种前端框架的纠结中我还是决定先入坑 MUI ，开坑不易，欢迎交流。
首先贴上几个链接
OK，下面直接进入正题
我们今天来试试制作网易云 App 的 UI，界面如下：
那么就开始工作吧，首先下载 ，然后打开新建移动 App 选择 MUI 模板（不下载也可以，可以手动创建 MUI 项目，这里就不再赘述）。
然后打开 index.html,在 body 标签中添加如下代码
class="mui-off-canvas-wrap mui-draggable mui-slide-in"&
class="mui-off-canvas-left" id="offCanvasSide"&
class="mui-scroll-wrapper"&
class="mui-scroll"&
class="mui-inner-wrap"&
class="mui-bar mui-bar-nav" style="margin-top: 10background-color: #FF0000;"&
class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"&&
class=" mui-segmented-control" style="margin:-4px 100px 0px 100align-content:
align-self: "&
class="mui-control-item mui-active" id="mine" style="background-color: #FF0000; color: #"&我的&
class="mui-control-item" id="discory" style="background-color: #FF0000;"&发现&
class="mui-control-item" id="dynamic" style="background-color: #FF0000;"&动态&
class="mui-off-canvas-backdrop"&&
其中我们的侧滑栏可以直接通过联想代码块快速实现触发语句
moffcanvas
#### 其实你不用打完就会出现可以选择的代码块，对应的代码块都有作用解释，这样可以很快的选择到需要的代码块。上述代码有几个注意的地方：
##### 1.我的 header 标签后的第一个 a 标签有下移 10px 的样式，这是因为我们要实现沉浸式（透明）状态栏，实现方法如下：
打开应用的manifest.json文件，切换到代码视图，在plus -& distribute -& apple 下添加UIReserveStatusbarOffset节点并设置值为false。
1. 真机运行不生效，需提交App云端打包后才生效；
2. 此功能仅在iOS7及以上系统有效。
打开应用的manifest.json文件，切换到代码视图，在plus -& distribute -& google 下添加ImmersedStatusbar节点并设置值为true。
1. 真机运行不生效，需提交App云端打包后才生效；
2. 此功能仅在Android4.4及以上系统有效。
配置系统状态栏样式
iOS平台可支持对系统状态栏样式的配置，在应用manifest.json文件的plus-&distribute-&apple下添加UIStatusBarStyle进行控制，默认值为"UIStatusBarStyleDefault"。
UIStatusBarStyleDefault
默认样式，iOS6及以下系统状态栏为黑底白字，iOS7及以上系统用于定义系统状态栏上文字颜色为黑字（适用于浅色背景）
UIStatusBarStyleBlackOpaque
深色背景色样式，iOS6及以下系统状态栏为黑底白字，iOS7及以上系统用于定义系统状态栏上文字颜色为白色（适用于深色背景）
UIStatusBarStyleBlackTranslucent
iOS6及以下系统在启动界面为灰底白字，iOS7及以上系统与UIStatusBarStyleBlackOpaque效果一样
设置系统状态栏背景颜色（iOS7及以上生效）
iOS平台可支持对系统状态栏背景颜色的配置，在应用manifest.json文件的plus-&distribute-&apple下添加StatusBarBackground进行控制：
值为字符串类型，格式为"#RRGGBB"格式，如红色为"#FF0000"；默认值为白色。
App云端打包设置系统状态栏背景颜色操作方式
双击应用的manifest.json文件，切换到“代码视图”，在apple节点下添加StatusBarBackground节点.
&div class="se-preview-section-delimiter"&&/div&
但是在设置了之后我们的顶部栏会有与状态栏重叠的部分，所以这里就要向下移动一定距离
2.顶部 tab 标签的 style 样式（也就是代码中在 上一个问题的 a 标签之后的 div 标签）
这里是为了让我们的样式与网易云音乐的顶部样式一致的做法，当然我这里还没有弄完，还存在边框的问题，但是本博客的重点不是这个，所以也就没太怎么弄了，其中添加的 ID 就是为了接下来的我们的动态加载子页面中需要用到的。接下来就是重点：
在 MUI 中有一个创建子页面的方法
mui.init({
subpages:[{
url:your-subpage-url,
id:your-subpage-id,
top:subpage-top-position,
bottom:subpage-bottom-position,
width:subpage-width,
height:subpage-height,
/*参数说明：styles表示窗口属性，参考5+规范中的WebviewStyle；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。*/
&div class="se-preview-section-delimiter"&&/div&
可以看到我们可以通过上述方法创建子页面实现分页，但是这只是一个页面，那么要怎么实现多页面的切换呢？这里就要引入 H5 webView相关的操作了，关于 H5 webview 的相关 API 可以看这里 ，我们这里用到的是 getWebviewById,他会返回一个 WebviewObject窗口对象 我们就在这个对象上做文章。下面来书写 JS 代码：
&script type="text/javascript" charset="utf-8"&
mui.plusReady(function(){
console.log("当前页面URL："+plus.webview.currentWebview().getURL());
document.getElementById("mine").addEventListener('tap',function(){
var cur = plus.webview.getWebviewById("contentHtml");
if(cur.getURL()!="htmlFile/mine.html")
console.log("显示我的");
cur.loadURL("htmlFile/mine.html")
document.getElementById("discory").addEventListener('tap',function(){
var cur = plus.webview.getWebviewById("contentHtml");
if(cur.getURL()!="htmlFile/discory.html")
console.log("显示我的");
cur.loadURL("htmlFile/discory.html")
document.getElementById("dynamic").addEventListener('tap',function(){
var cur = plus.webview.getWebviewById("contentHtml");
if(cur.getURL()!="htmlFile/dynamic.html")
console.log("显示我的");
cur.loadURL("htmlFile/dynamic.html")
mui.init({
subpages:[
url:'htmlFile/mine.html',
id:'contentHtml',
top:'55px'
class="se-preview-section-delimiter"&&
对应的要注意的地方以及解释上面代码里已经说的很清楚了，至于其他的 3 个页面，我是另外写好的，你们也要写出页面，url 中填写你们要跳转的页面的地址就好了（网络地址或者本地地址），这里我就不说其他页面怎么建立了
运行如下，仔细看就能发现一个问题，我们列表的最下面一项没有显示出来，也就是说页面没有完全显示出来，
解决方法：在创建子页面的时候我们设置了top 的话就要也设置 bottom 否者会导致页面显示不完全！（仔细看看前面官方文档就会发现，这就是不认真看文档的锅），下面修改 jS 代码：
mui.init({
subpages:[
url:'htmlFile/mine.html',
id:'contentHtml',
top:'55px',
bottom:'0px'
然后保存，最好重新编译一次（这种更新不知道为什么我的如果不重新编译就不会出现正确的效果），停止调试，再开始调试，结果如下( 多 tab 页面的实时切换就完成了)：
已知问题，侧边栏会被子页面覆盖，目前想法是通过 zindex 调整，但是试过无用。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：20518次
排名：千里之外
原创：39篇
转载：13篇
评论：24条
(2)(1)(4)(16)(11)(2)(8)(6)(2)5505人阅读
webApp开发（3）
一个完整的APP少不了,要有头部导航跟底部导航,那么我们在用MUI框架来开发APP时,在制作头部导航很底部选项卡时我们应该要注意哪些呢?
接下来给大家来详细讲解一下:
在上一节中我们已经介绍怎么去做一个开机引导图了如果不会的,就按照上一篇文章讲解的自己在作一遍.
最终我们要实现的效果如下:
1.首先创建4个底部选项卡页面
home1.html
home2.html
home3.html
home4.html
2.index.html代码实现
创建完之后,我们返回程序加载的入口index.html去写相关的代码:
首先床架四个底部选项卡:
class="mui-bar mui-bar-tab"&
id="defaultTab" class="mui-tab-item mui-active" href="templete/home1.html"&
class="mui-icon mui-icon-home"&&
class="mui-tab-label"&首页01&
class="mui-tab-item" href="templete/home2.html"&
class="mui-icon mui-icon-home"&&
class="mui-tab-label"&首页02&
class="mui-tab-item" href="templete/home3.html"&
class="mui-icon mui-icon-home"&&
class="mui-tab-label"&首页03&
class="mui-tab-item" href="templete/home4.html"&
class="mui-icon mui-icon-home"&&
class="mui-tab-label"&首页04&
开始写JS代码:
function jumpPage(){
var subpages = ['templete/home1.html','templete/home2.html', 'templete/home3.html', 'templete/home4.html'];
var subpage_style = {
top: '0px',
bottom: '51px'
var aniShow = {};
mui.plusReady(function(){
launchScreen();
var self = plus.webview.currentWebview();
for (var i = 0; i & 4; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i & 0) {
sub.hide();
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
self.append(sub);
var activeTab = subpages[0];
var title = document.getElementById("title");
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
plus.webview.hide(activeTab);
activeTab = targetT
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
mui.trigger(defaultTab, 'tap');
var current = document.querySelector(".mui-bar-tab&.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
这样就实现了,点击各个页面,可以自由切换了
3.实现下面的选项卡与头部的导航的标题对应
现在去刚才创建的html中去分别加入这几行代码:
home1.html
class="mui-bar mui-bar-nav"&
class="mui-title"&home1&
home2.html
class="mui-bar mui-bar-nav"&
class="mui-title"&home1&
home3.html
class="mui-bar mui-bar-nav"&
class="mui-title"&home1&
home4.html
class="mui-bar mui-bar-nav"&
class="mui-title"&home1&
这个一个底部选项卡跟头部导航就做完啦,在做的的过程中大家要明白几个函数的意思,下面就我们使用的几个函数给大家解释一下:
mui.extend()
var target = {
company:"dcloud",
mui:"小巧、高效"
var obj1 = {
city:"beijing",
HBuilder:"飞一样的编码"
mui.extend(target,obj1)
//输出：{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target))
从如上输出可以看到，product节点下的mui被替换成了HBuilder，因为默认仅合并对象根节点下的key、value；如果想深度合并，则可以传入deep参数，如下：
var target = {
company:"dcloud",
mui:"小巧、高效"
var obj1 = {
city:"beijing",
HBuilder:"飞一样的编码"
//支持深度合并
mui.extend(true,target,obj1);
//输出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));
plus.webview.create创建新的
WebviewObject plus.webview.create( url, id, styles, extras );
创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。
url: ( String ) 可选 新窗口加载的HTML页面地址
新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。
id: ( String ) 可选 新窗口的标识
窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
styles: ( WebviewStyles ) 可选 创建Webview窗口的样式（如窗口宽、高、位置等信息）
extras: ( JSON ) 可选 创建Webview窗口的额外扩展参数
值为JSON类型，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，如： var w=plus.webview.create(‘url.html’,’id’,{},{preload:”preload webview”}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”
WebviewObject : Webview窗口对象
&!DOCTYPE html&
charset="utf-8"&
&Webview Example&
type="text/javascript"&
function plusReady(){
if(window.plus){
plusReady();
document.addEventListener("plusready",plusReady,false);
function create(){
var w = plus.webview.create( "/dhnetwork" );
创建新的Webview窗口/&
onclick="create()"&Create&
currentWebview
获取当前窗口的WebviewObject对象
WebviewObject plus.webview.currentWebview();
获取当前页面所属的Webview窗口对象。
WebviewObject : Webview窗口对象
差不多就这几个函数比较难懂,这样一个简单的底部选项卡与头部导航就做完了,接下来会给大家讲解,数据解析的几种方式,包括数据展示应该注意什么,请关注下一节:
[webAPP项目]基于MUI框架webAPP开发功能流程之轮播图制作详解03
我的公众号:
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：838078次
积分：11713
积分：11713
排名：第1228名
原创：342篇
转载：66篇
译文：18篇
评论：393条
文章：12篇
阅读：27508
文章：24篇
阅读：27396
阅读：5156
阅读：1568
阅读：4016
阅读：6084
文章：53篇
阅读：109371
阅读：10966
文章：55篇
阅读：147502
阅读：10886
文章：20篇
阅读：100581
文章：103篇
阅读：157221
文章：11篇
阅读：12907
文章：19篇
阅读：66667HBuilder中的MUI页面
HBuilder中的MUI页面
编辑：www.fx114.net
本篇文章主要介绍了"HBuilder中的MUI页面"，主要涉及到HBuilder中的MUI页面方面的内容，对于HBuilder中的MUI页面感兴趣的同学可以参考一下。
快速构建页面
3步搭好页面主框架
1. 新建含mui的HTML文件
在Hbuilder中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。
2.输入mheader
顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
3.输入mbody
除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：