VUE中实现MUI轮播图效果

我不是女神ヾ 2022-02-03 06:59 426阅读 0赞

1、配置App.vue文件，通过<router-view></router-view>加载轮播图页面

  1. <template>
  2.   <div class="app-container">
  3.     <header id="header" class="mui-bar mui-bar-nav">
  4.       <h1 class="mui-title">vue-cms</h1>
  5.     </header>
  6.     <router-view></router-view>
  7.     <footer>
  8.       <nav class="mui-bar mui-bar-tab">
  9.         <router-link class="mui-tab-link" to="/home">
  10.           <span class="mui-icon mui-icon-home"></span>
  11.           <span class="mui-tab-label">首页</span>
  12.         </router-link>
  13.         <router-link class="mui-tab-link" to="/member">
  14.           <span class="mui-icon mui-icon-contact"></span>
  15.           <span class="mui-tab-label">会员</span>
  16.         </router-link>
  17.         <router-link class="mui-tab-link" to="/shopcar">
  18.           <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
  19.             <span class="mui-badge">0</span>
  20.           </span>
  21.           <span class="mui-tab-link">购物车</span>
  22.         </router-link>
  23.         <router-link class="mui-tab-item" to="/search">
  24.           <span class="mui-icon mui-icon-search"></span>
  25.           <span class="mui-tab-label">搜索</span>
  26.         </router-link>
  27.       </nav>
  28.     </footer>
  29.   </div>
  30. </template>
  32. <script>
  33. </script>
  35. <style lang="scss" scoped>
  36. .app-container {
  37.   padding-top: 44px;
  38.   .mui-bar-nav {
  39.     background-color: #0d8ff7;
  40.   }
  42.   .mui-bar-tab .mui-tab-link.mui-active {
  43.     color: #0d8ff7;
  44.   }
  46.   .mui-bar-tab .mui-tab-link {
  47.     display: table-cell;
  48.     overflow: hidden;
  49.     width: 1%;
  50.     height: 50px;
  51.     text-align: center;
  52.     vertical-align: middle;
  53.     white-space: nowrap;
  54.     text-overflow: ellipsis;
  55.     color: #929292;
  56.   }
  58.   .mui-bar-tab .mui-tab-link .mui-icon {
  59.     top: 3px;
  60.     width: 24px;
  61.     height: 24px;
  62.     padding-top: 0;
  63.     padding-bottom: 0;
  64.   }
  66.   .mui-bar-tab .mui-tab-link .mui-icon ~ .mui-tab-label {
  67.     font-size: 11px;
  68.     display: block;
  69.     overflow: hidden;
  70.     text-overflow: ellipsis;
  71.   }
  72. }
  73. </style>

2、配置.babelrc文件，vue里会使用严格模式，而mui不支持严格模式会报错

  1. 方式一：
  2. 先执行npm i babel-plugin-transform-remove-strict-mode -D
  3. 再在.babelrc文件中配置 "plugins": [ "transform-remove-strict-mode" ]
  5. 方式二：
  6. "ignore": [
  7.     "./src/lib/mui/js/mui.min.js"
  8.   ]

4、配置HomeContainer.vue文件，实现基本功能
从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。浏览器控制台会报错。
通过设置样式* { touch-action: pan-y };不会报错。详细解决方法参考地址
在这里插入图片描述

  1. <template>
  2.   <div class="home-contain">
  3.     <div id="slider" class="mui-slider">
  4.       <div class="mui-slider-group mui-slider-loop">
  5.         <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
  6.         <div class="mui-slider-item mui-slider-item-duplicate">
  7.           <a href="#">
  8.             <img src="../images/yuantiao.jpg">
  9.           </a>
  10.         </div>
  11.         <!-- 第一张 -->
  12.         <div class="mui-slider-item">
  13.           <a href="#">
  14.             <img src="../images/shuijiao.jpg">
  15.           </a>
  16.         </div>
  17.         <!-- 第二张 -->
  18.         <div class="mui-slider-item">
  19.           <a href="#">
  20.             <img src="../images/muwu.jpg">
  21.           </a>
  22.         </div>
  23.         <!-- 第三张 -->
  24.         <div class="mui-slider-item">
  25.           <a href="#">
  26.             <img src="../images/cbd.jpg">
  27.           </a>
  28.         </div>
  29.         <!-- 第四张 -->
  30.         <div class="mui-slider-item">
  31.           <a href="#">
  32.             <img src="../images/yuantiao.jpg">
  33.           </a>
  34.         </div>
  35.         <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
  36.         <div class="mui-slider-item mui-slider-item-duplicate">
  37.           <a href="#">
  38.             <img src="../images/shuijiao.jpg">
  39.           </a>
  40.         </div>
  41.       </div>
  42.       <div class="mui-slider-indicator">
  43.         <div class="mui-indicator mui-active"></div>
  44.         <div class="mui-indicator"></div>
  45.         <div class="mui-indicator"></div>
  46.         <div class="mui-indicator"></div>
  47.       </div>
  48.     </div>
  49.   </div>
  50. </template>
  52. <script>
  53. import mui from "../../lib/mui/js/mui.min.js";
  54. export default {
  55.   data() {
  56.     return {};
  57.   },
  58.   mounted() {
  59.     mui.init({
  60.       // 启用滑动
  61.       swipeBack: true
  62.     });
  63.     var slider = mui("#slider");
  64.     // 配置定时轮播滑动
  65.     slider.slider({
  66.       interval: 2000
  67.     });
  68.   },
  69.   methods: {}
  70. };
  71. </script>
  73. <style lang="scss" scoped>
  74. * { touch-action: pan-y; }
  75. </style>

5、底部标签不能正常切换问题，需要将类名mui-tab-item替换为其它名称如mui-tab-link，然后再去自定义底部样式。

  1. <router-link class="mui-tab-link" to="/home">
  2.    <span class="mui-icon mui-icon-home"></span>
  3.    <span class="mui-tab-label">首页</span>
  4. </router-link>

发表评论

表情：
评论列表 （有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MUI实现图片轮播效果

    引言 图片轮播效果大多数会在出现在商品的详情页或应用首页，它可以用来展示商品详情，也可以用来展示广告信息，活动信息等， 所以平时练习一下图片轮播效果的实现还是很有必...

    比眉伴天荒比眉伴天荒/ 0 赞/ 162 阅读