Vue中使用mui的Demo: 轮播图、底部菜单(tab-bar

<template>
  <div class="hello">
      <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">依管家 -- 洗护高订专家</h1>
      </header>
     <div class="mui-content" style="border:0px solid #008000;">
          
          <div id="slider" class="mui-slider" style="margin-top:-40px;">
              <div class="mui-slider-group mui-slider-loop">
                  <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                  <div class="mui-slider-item mui-slider-item-duplicate">
                      <a href="#">
                          <img src="../assets/images/test/yuantiao.jpg">
                          <p class="mui-slider-title">静静看这世界</p>
                      </a>
                  </div>
                  <div class="mui-slider-item">
                      <a href="#">
                          <img src="../assets/images/test/shuijiao.jpg">
                          <p class="mui-slider-title">幸福就是可以一起睡觉</p>
                      </a>
                  </div>
                  <div class="mui-slider-item">
                      <a href="#">
                          <img src="../assets/images/test/muwu.jpg">
                          <p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
                      </a>
                  </div>
                  <div class="mui-slider-item">
                      <a href="#">
                          <img src="../assets/images/test/cbd.jpg">
                          <p class="mui-slider-title">Color of SIP CBD</p>
                      </a>
                  </div>
                  <div class="mui-slider-item">
                      <a href="#">
                          <img src="../assets/images/test/yuantiao.jpg">
                          <p class="mui-slider-title">静静看这世界</p>
                      </a>
                  </div>
                  <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                  <div class="mui-slider-item mui-slider-item-duplicate">
                      <a href="#">
                          <img src="../assets/images/test/shuijiao.jpg">
                          <p class="mui-slider-title">幸福就是可以一起睡觉</p>
                      </a>
                  </div>
              </div>
              <div class="mui-slider-indicator mui-text-right">
                  <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 class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">页眉</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
                </div>
            </div>
            <div class="mui-card-footer">页脚</div>
        </div>
        
        <div class="mui-card">
            <div class="mui-card-header mui-card-media" style="height:110px;width:300px;background-image:url(../assets/images/test/cbd.jpg)">
                
                <!-- <img src="../assets/images/test/cbd.jpg" style="height:110px;width:300px"/> -->
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>Posted on January 18, 2016</p>
                    <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Read more</a>
            </div>
        </div>
        
        
        <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <img src="../assets/images/test/logo.png" />
                <div class="mui-media-body">
                    小M
                    <p>发表于 2016-06-30 15:30</p>
                </div>
                <img class="mui-pull-left" src="../assets/images/test/logo.png" width="34px" height="34px" />
                <h2>小M</h2>
                <p>发表于 2016-06-30 15:30</p>
            </div>
            
            <div class="mui-card-content" >
                <img src="../assets/images/test/yuantiao.jpg" alt="" width="100%"/>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Comment</a>
                <a class="mui-card-link">Read more</a>
            </div>
        </div>
      </div>
      
      
      
      
      
      <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="#tabbar">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-chat">
            <span class="mui-icon mui-icon-extra mui-icon-extra-prech">
                <span class="mui-badge">9</span>
            </span>
            <span class="mui-tab-label">充值</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-contact">
            <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
            <span class="mui-tab-label">订单车</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-contact">
            <span class="mui-icon mui-icon-extra mui-icon-extra-order"></span>
            <span class="mui-tab-label">下单</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-map">
            <span class="mui-icon mui-icon-extra mui-icon-extra-people"></span>
            <span class="mui-tab-label">我的</span>
        </a>
      </nav>
      
      
      
    <!-- <h1>{{ msg }}</h1> -->
    
  </div>
</template>

<script>
            
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted: function(){
      mui.init({
        swipeBack:true //启用右滑关闭功能【一旦取值为false，左右触控滑动将会失效！】
      });
      // mui.ready(function(){
      //    mui(".mui-scroll-wrapper").scroll({
      //        bounce: true //是否启用回弹
      //    });     
      // });
      var slider = mui("#slider");
      slider.slider({
        interval: 1000
      });
  }
}

// mui.init({
//  swipeBack:true //启用右滑关闭功能【一旦取值为false，左右触控滑动将会失效！】
// });
//  // var slider = mui("#slider");
//  // slider.slider({
//  //  interval: 1000
//  // });
// mui.ready(function(){
//  mui(".mui-scroll-wrapper").scroll({
//      bounce: true //是否启用回弹
//  });     
// });

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.hello {
    margin-bottom: 55px;
}

h3 {
  margin: 10px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>