网站的思维导图怎么做,邢台网站建设网络优化,珠海开发网站公司,上海app开发公司今天是很丧的一天#xff0c;做什么都提不起兴趣#xff0c;不知道何时才能做到道家的“无为#xff0c;而无所不为”#xff0c;也无法理解范仲淹的“不以物喜不以己悲”。可是再没兴趣#xff0c;学习还是要继续#xff01;#xff01;#xff01;为了让自己放松做什么都提不起兴趣不知道何时才能做到道家的“无为而无所不为”也无法理解范仲淹的“不以物喜不以己悲”。可是再没兴趣学习还是要继续为了让自己放松去趟博物馆不但没有起到放松心情的作用反而累得自己腰酸背疼。苦逼的几天害接下来还是干正事 https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 目录一、前提二、模板文件的创建三、实现底部选项卡的功能3.1打开main代码3.2创建底部选项卡页面3.3实现底部选项卡功能3.4实现切换功能此文重点四、扩展一、前提
打开我们的HBuilder
回顾一下我们前面的知识详细点击这里
为了借助MUI框架我们需要建一个模板文件哈哈哈 二、模板文件的创建
新建一个移动App 自己命名这里选择Hello mui项目 这样模板就建好了先放这里
三、实现底部选项卡的功能
在hello.mui模板新建mui项目例如我这里是MUI_model中找到examples文件夹下的tab-webview-main.html 并且复制到自己的项目中比如我自己的项目为one改名为main也可以改名为其他的哈哈哈 3.1打开main代码
去掉../ 因为这里的项目不用跳出上一级文件夹
看到这里我们可以看到这些href的链接要链接到底部选项卡的页面接下来我们可以创建页面了。
3.2创建底部选项卡页面
新建index(原来有的可以不用新建) prolist car my
以index.html为栗子 虽然步骤很简单但是还是要剪出来新建html文件 切记这里点击含mui的html文件后面几个新建一样的类似的操作就好啦 文件建好以后项目就是现在这个样子
3.3实现底部选项卡功能
更改href的路径
将底部选项卡的href修改为如下图而且span标签里面的文字也可以自己设置 此时47行的代码也要更着修改奥
3.4实现切换功能此文重点
以my.html为例实现切换
我们在body里面来编写一段代码
(快捷键) mb 回车 选择mbody ml 回车
然后自己再填写相应的文字 my.html
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet //headbodyscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()/scriptdiv classmui-contentul classmui-table-viewli classmui-table-view-cella classmui-navigate-right我的订单/a/lili classmui-table-view-cella classmui-navigate-right修改密码/a/lili classmui-table-view-cella classmui-navigate-right反馈意见/a/lili classmui-table-view-cell idbtnaboutUsa classmui-navigate-right关于我们/a/li/ul/div/body/html实现功能实现点击关于我们就返回关于我们的这一页
我们就是这一行去设置id因为后面我们要调用它 去js拿这个id 打开新页面
参考代码来源https://dev.dcloud.net.cn/mui/window/
在my.html的body中输入下面这个代码这个代码的意思是拿到关于我们的Id,因为我们在my.html中设置了关于我们的id为btnAboutUsaddEventListener(“tap”,function()为点击事件这串代码实现的功能就是点击关于我们就会出现关于我们页面的信息 script srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()document.getElementById(btnAboutUs).addEventListener(tap, function() {var webview mui.openWindow({url: aboutUs.html,extras: {name: wangtiantian, //扩展参数time: 2020-11-9}});// console.log(123) 用来调试代码})/script完整的就应该是
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet //headbodydiv classmui-contentul classmui-table-viewli classmui-table-view-cella classmui-navigate-right我的订单/a/lili classmui-table-view-cella classmui-navigate-right修改密码/a/lili classmui-table-view-cella classmui-navigate-right反馈意见/a/lili classmui-table-view-cell idbtnAboutUsa classmui-navigate-right关于我们/a/li/ul/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()document.getElementById(btnAboutUs).addEventListener(tap, function() {var webview mui.openWindow({url: aboutUs.html,extras: {name: wangtiantian, //扩展参数time: 2020-11-9}});// console.log(123) 用来调试代码})/script/body/html这边我们新建一个aboutUs.html关于我们的页面 我们在body里面随便写点东西例如mh回车mb回车选择mbody在div里面span回车
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet //headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title我们都是可爱的小朋友哟/h1/headerdiv classmui-content欢迎关注这个超级无敌可爱的人鸭span idauthorBox/span/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()/script/body/html可以修改一下页面入口 这时候我们可以手机运行一下试试 点击红框内的东东
看运行结果 (把手机开着) 从上图我们可以看到index页面有多余的东西 于是我们去到Index页面 将标题和底部选项卡都删了于是就可以得到下面的代码 index.html
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /title/titlescript srcjs/mui.min.js/scriptlink hrefcss/mui.min.css relstylesheet /script typetext/javascript charsetutf-8mui.init();/script/headbodydiv idslider classmui-slider div classmui-slider-group mui-slider-loop!-- 额外增加的一个节点(循环轮播第一个节点是最后一张轮播) --div classmui-slider-item mui-slider-item-duplicatea href#img srchttp://placehold.it/400x300/a/div!-- 第一张 --div classmui-slider-itema href#img srchttp://placehold.it/400x300/a/div!-- 第二张 --div classmui-slider-itema href#img srchttp://placehold.it/400x300/a/div!-- 第三张 --div classmui-slider-itema href#img srchttp://placehold.it/400x300/a/div!-- 第四张 --div classmui-slider-itema href#img srchttp://placehold.it/400x300/a/div!-- 额外增加的一个节点(循环轮播最后一个节点是第一张轮播) --div classmui-slider-item mui-slider-item-duplicatea href#img srchttp://placehold.it/400x300/a/div/divdiv classmui-slider-indicatordiv classmui-indicator mui-active/divdiv classmui-indicator/divdiv classmui-indicator/divdiv classmui-indicator/div/div/divul classmui-table-view mui-grid-view mui-grid-9li classmui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3a href#span classmui-icon mui-icon-home/spandiv classmui-media-bodyHome/div/a/lili classmui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3a href#span classmui-icon mui-icon-emailspan classmui-badge mui-badge-red5/span/spandiv classmui-media-bodyEmail/div/a/lili classmui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3a href#span classmui-icon mui-icon-chatbubble/spandiv classmui-media-bodyChat/div/a/lili classmui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3a href#span classmui-icon mui-icon-location/spandiv classmui-media-bodyLocation/div/a/lili classmui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3a href#span classmui-icon mui-icon-search/spandiv classmui-media-bodySearch/div/a/lili classmui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3a href#span classmui-icon mui-icon-phone/spandiv classmui-media-bodyPhone/div/a/li/ul/body/html再次运行我们的appindex看起来就舒服了。
怎么实现点击“我的”中的“关于我们”就跳转到关于我们页面
还记得我们刚刚在my.html中写的这个点击事件在前面的打开新页面中有介绍 在aboutUs.html中输入这段代码我们可以根据span的idauthorBox把拿到的参数传到上面的div中的span里面去。 这里需要注意一点的是参数是从my.html我的里面拿过来的 接下来我们就可以在手机上面运行试一下点击“我的”中的“关于我们”就可以跳转到关于我们页面。
去实操一下就知道啦
四、扩展
这边再扩展几个如何给标题改背景颜色 和写前端是一样的 例如 第16行的a classmui-navigate-right stylebackground-color: pink;
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet //headbodydiv classmui-contentul classmui-table-viewli classmui-table-view-cella classmui-navigate-right stylebackground-color: pink;我的订单/a/lili classmui-table-view-cella classmui-navigate-right修改密码/a/lili classmui-table-view-cella classmui-navigate-right反馈意见/a/lili classmui-table-view-cell idbtnAboutUsa classmui-navigate-right关于我们/a/li/ul/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()document.getElementById(btnAboutUs).addEventListener(tap, function() {var webview mui.openWindow({url: aboutUs.html,extras: {name: wangtiantian, //扩展参数time: 2020-11-9}});// console.log(123) 用来调试代码})/script/body/html显示效果 如何更改图标
到我们创建的模板中去找examples文件夹找到icons.html和icons-extra.html 打开他们选取对应的你需要的图标
比如说我要修改我的Index页面的微信图标如图此处需要修改 因此我们可以去到模板里面找到微信图标对应的class名称然后将这个名称复制粘贴到刚刚我们要修改的地方去 如图此时我的index页面的微信图标就改变了。 注意如果说我们用的是扩展图标也就是icons-extra.html此时我们应该把扩展图标样式和字体也要拿到我们的项目中
比如说我们要拿icons-extra.html的第一个图标 我们就应该把模板当中的样式和字体复制粘贴到自己的项目中去 然后再直接修改相应的代码就可以啦
大功告成https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭有什么问题留言私信皆可看见必回
如有转载请注明出处
