引导页制作
本文的引导页和[官方的引导页示例](/dcloudio/mui/blob/master/examples/hello-mui/examples/guide.html)还是有一定的区别的。
页面的展示以图片为主，包括文字也已制作成图片
另外对首页和尾页分别添加了右滑和左滑事件，以保证页面背景和当前页背景是相同的，这样来确保样式的统一
&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no& /&
&title&&/title&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
&link href=&../css/mui.min.css& rel=&stylesheet& /&
height: 100%;
margin: 0;
.mui-content {
height: 100%;
padding: 0;
.mui-slider {
height: 100%;
.mui-slider-group {
height: 100%;
.mui-slider-item {
height: 100%;
width: 100%;
margin-left: 0
margin-right: 0
height: 100%;
bottom: 11%;
width: 40%;
height: 35
text-align:
left: 30%;
padding: 0;
border: 0;
background:
z-index: 100;
.img_content {
width: 100%;
height: 100%;
.img_content img:first-child {
.img_content img:nth-child(2) {
.img_content img:last-child {
bottom: 10%;
&div class=&mui-content& style=&height: 100%;overflow:padding: 0margin: 0background-color: #5dcbe2;&&
&div id=&slider& class=&mui-slider&&
&div class=&mui-slider-group&&
&!-- 第一张 --&
&div class=&mui-slider-item& style=&background-color: #5dcbe2;&&
&div class=&img_content&&
&img src=&../images/welcome/text1.png& /&
&img src=&../images/welcome/1.png&&
&!-- 第二张 --&
&div class=&mui-slider-item& style=&background-color: #68d8b0;&&
&div class=&img_content&&
&img src=&../images/welcome/text2.png& /&
&img src=&../images/welcome/2.png&&
&!-- 第三张--&
&div class=&mui-slider-item& style=&background-color: #c1392b;&&
&div class=&img_content&&
&img src=&../images/welcome/text3.png& /&
&img src=&../images/welcome/3.png&&
&button id=&into&&&/button&
&img src=&../images/welcome/btnin.png&&
&div class=&mui-slider-indicator&&
&div class=&mui-indicator mui-active&&&/div&
&div class=&mui-indicator&&&/div&
&div class=&mui-indicator&&&/div&
&script src=&../js/mui.js& type=&text/javascript& charset=&utf-8&&&/script&
&script type=&text/javascript& charset=&utf-8&&
mui.init();
mui.plusReady(function(){
mui.os.ios&&plus.navigator.setFullscreen(true);
var slider = mui('.mui-slider').slider();
initPageguid();
setStatusBarBackgroud();
plus.navigator.closeSplashscreen();
mui(&#into&)[0].addEventListener('tap', function() {
mui.fire(plus.webview.getLaunchWebview(), 'run');
//plus.webview.currentWebview().close();//等登录注册等页面显示之后再关闭
function initPageguid(){
//绑定滑屏相关事件
var gallery = mui('.mui-slider')[0];
gallery.addEventListener('swiperight', function(e) {
//向左划动
var num = mui('.mui-slider').slider().getSlideNumber() - 1;
setContainerBackg(num);
gallery.addEventListener('swipeleft', function(e) {
//向右划动
var num = mui('.mui-slider').slider().getSlideNumber() + 1;
setContainerBackg(num);
function setStatusBarBackgroud () {
if (mui.os.ios) {
plus.navigator.setStatusBarStyle(&UIStatusBarStyleBlackOpaque&);
//提前设置登陆页背景颜色
plus.navigator.setStatusBarBackground(A75B8&);
function setContainerBackg(num) {
//提前设置背景色
if (num == 0) {
mui('.mui-content')[0].style.backgroundColor = '#5dcbe2';
} else if (num == 2) {
mui('.mui-content')[0].style.backgroundColor = '#c1392b';
阅读(...) 评论()