急，mui选项卡在vue中失效怎么解决

<template>  

  <div>  
    <div style="height: 44px;width: 100%;font-size: 16px; color: #333333;margin-bottom: 15px;padding: 15px;">  
      宣传海报  
    </div>  
    <div id="slider" class="mui-slider" style="padding: 0 15px;">  
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
        <div class="mui-scroll">  
          <a class="mui-control-item paddingNone mui-active tapText " href="#item1mobile" data-id="1">  
            人气海报  
          </a>  
          <a class="mui-control-item paddingNone tapText" href="#item2mobile" data-id="2">  
            早安心语  
          </a>  
          <a class="mui-control-item paddingNone tapText " href="#item3mobile" data-id="3">  
            彩票知识  
          </a>  
          <a class="mui-control-item paddingNone tapText" href="#item4mobile" data-id="4">  
            热点营销  
          </a>  
          <a class="mui-control-item paddingNone  tapText " href="#item5mobile" data-id="5">  
            中奖宣传  
          </a>  
          <a class="mui-control-item paddingNone tapText" href="#item6mobile" data-id="6">  
            即开宣传  
          </a>  
          <a class="mui-control-item paddingNone  tapText " href="#item7mobile" data-id="7">  
            金牌名片  
          </a>  
          <a class="mui-control-item paddingNone tapText" href="#item8mobile" data-id="8">  
            热门赛事  
          </a>  
          <a class="mui-control-item paddingNone  tapText " href="#item9mobile" data-id="9">  
            开奖宣传  
          </a>  
          <a class="mui-control-item paddingNone tapText" href="#item10mobile" data-id="10">  
            合买彩票  
          </a>  
        </div>  

      </div>  
    </div>  

    <!--分析教程-->  
    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-scroll-wrapper " style="position: absolute;top: 100px;">  
      <ul class="mui-scroll" style="padding: 0 10px;">  
        <li @click="hbDetail">  
          <img src="../../static/img/haibao1.png" class="image1">  

        </li>  
        <li>  
          <img src="../../static/img/haibao2.png">  

        </li>  
        <li>  
          <img src="../../static/img/haibao3.png">  

        </li>  
        <li>  
          <img src="../../static/img/haibao4.png">  
        </li>  
        <li>  
          <img src="../../static/img/haibao3.png">  

        </li>  
        <li>  
          <img src="../../static/img/haibao4.png">  
        </li>  
        <li>  
          <img src="../../static/img/haibao3.png">  

        </li>  
        <li>  
          <img src="../../static/img/haibao4.png">  
        </li>  
      </ul>  
    </div>  

    <!--营销教程-->  
    <div id="item2mobile" class="mui-slider-item mui-control-content">  
      222  
    </div>  
    <div id="item3mobile" class="mui-slider-item mui-control-content ">  
      333  
    </div>  

    <!--营销教程-->  
    <div id="item4mobile" class="mui-slider-item mui-control-content">  
      444  
    </div>  
    <div id="item5mobile" class="mui-slider-item mui-control-content">  
      555  
    </div>  

    <!--营销教程-->  
    <div id="item6mobile" class="mui-slider-item mui-control-content">  
      666  
    </div>  
    <div id="item7mobile" class="mui-slider-item mui-control-content ">  
      7  
    </div>  

    <!--营销教程-->  
    <div id="item8mobile" class="mui-slider-item mui-control-content">  
      8  
    </div>  
    <div id="item9mobile" class="mui-slider-item mui-control-content">  
      9  
    </div>  

    <!--营销教程-->  
    <div id="item10mobile" class="mui-slider-item mui-control-content">  
      10  
    </div>  

  </div>  

  </div>  
</template>  

<script>  
  import global from '../../static/js/global'  

  export default {  
    name: 'zxc',  
    data() {  
      return {  

      }  
    },  
    mounted() {  
      // var that = this;  
      // that.bannerswiper()  
      // that.getuser()  
      mui.init()  

      mui('.mui-scroll-wrapper').scroll({});  

    },  
    methods: {  
      hbDetail() {  
        var that = this  
        that.$router.push({  
          path: '/hbDetail', //跳转路由  
          query: { //参数对象  
            userId: that.$route.query.userId,  
            userLevel: that.userLevel  
          }  
        });  
      }  
    }  

  }  
</script>  

<style>  
  * {  
    touch-action: pan-y;  
  }  

  .mui-fullscreen {  
    top: 50px;  
    padding: 0 15px;  
  }  

  .mui-segmented-control.mui-scroll-wrapper .mui-control-item {  
    padding: 0 5px;  
    margin-right: 10px;  
  }  

  .mui-content,  
  body {  
    background-color: #FFFFFF;  
  }  

  .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {  
    color: #FFFFFF;  
    background: linear-gradient(0deg, rgba(255, 168, 0, 1) 0%, rgba(255, 121, 22, 1) 100%);  
    border-radius: 9px;  
    /* line-height: 19px; */  
  }  

  .mui-segmented-control .mui-control-item {  
    line-height: 19px;  
    font-size: 12px;  
  }  

  ul,  
  li {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
  }  

  ul li {  
    width: 50%;  
    height: 256px;  
    float: left;  
    padding: 5px;  
  }  

  li img {  
    /* float: left;  
    width: 43%;  
    height: 256px;  
    margin: 10px; */  
    width: 100%;  
    height: 100%;  

  }  

  .mui-fullscreen {  
    padding: 0;  
  }  

  .mui-segmented-control.mui-scroll-wrapper .mui-control-item {  
    background-color: rgba(240, 240, 240, 1);  
    color: #333333;  
    border-radius: 9px;  
  }  
</style>