博客

下载mui的dist文件夹

dist放在node_modules中

main.js

// 引入mui的css文件和扩展文件
import '../node_modules/dist/css/mui.min.css'
import '../node_modules/dist/css/icons-extra.css'

index.vue中

 <div
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <!--这里放置真实显示的DOM内容-->
          <a class="mui-control-item">
            <img src="../../assets/img/图层-15@2x.png" alt>
            <p class="title">爱心传递能量</p>
            <p class="price">
              <span>
                <i>￥</i> 80
              </span>
              <span>包邮</span>
            </p>
          </a>
          <a class="mui-control-item">
            <img src="../../assets/img/图层-15@2x.png" alt>
            <p class="title">爱心传递能量</p>
            <p class="price">
              <span>
                <i>￥</i> 80
              </span>
              <span>包邮</span>
            </p>
          </a>
          <a class="mui-control-item">
            <img src="../../assets/img/图层-15@2x.png" alt>
            <p class="title">爱心传递能量</p>
            <p class="price">
              <span>
                <i>￥</i> 80
              </span>
              <span>包邮</span>
            </p>
          </a>
        </div>
      </div>
    </div>


<script>
// bug :mui的dist文件要放在node_modules中
import mui from "../../../node_modules/dist/js/mui.min.js";
export default {
	mounted() {
	    //轮播图：获得slider插件对象
	    var gallery = mui(".mui-slider");
	    gallery.slider({
	      interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
	    });
	
	    // scroll左右滚动
	    mui(".mui-scroll-wrapper").scroll({
	      // deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	      scrollY: false, //是否竖向滚动
	      scrollX: true, //是否横向滚动
	      startX: 0, //初始化时滚动至x
	      startY: 0, //初始化时滚动至y
	      // indicators: true, //是否显示滚动条
	      deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
	      bounce: true //是否启用回弹
	    });
	  }
	};

css样式

.mui-slider-indicator.mui-segmented-control{
      height: 4.3rem;
      .mui-scroll{
        height: 100%;
        a{
          width: 32%;
          height: 100%;
          display: inline-block;
          padding: 0 0.15rem;
          img{
            height: 70%;
          }
          .title{
            text-align: left;
            font-size: 0.26rem;
            color: rgb(51,51,51);
            margin-bottom: 0;
          }
          .price{
            color:rgb(255,159,9);
            display: flex;
            justify-content: space-between;
            line-height: 1;
            // margin: 0 0.2rem;
            span{
              &:first-child{
                font-size: 0.3rem;
                font-weight: 700;
              }
              &:last-child{
                font-size: 0.2rem;
                display: inline-block;
                width: 0.6rem;
                height: 0.3rem;
                border: 0.01rem solid rgb(255,159,9);
                border-radius: 0.06rem;
                line-height: 0.3rem;
                text-align: center;
              }
            }
          }
        }
      }
    }