類似今日頭條，頭部tab可滑動，下面的內容可跟着滾動，摻雜着vue和require等用法例子

 

 

1、在main.js里

/*主模塊的入口 結合require一起使用*/

require.config({//require的基礎用法   配置一下
       paths: {
          "Zepto" : "zepto.min",
          "fastclick":"fastclick",
          "jquery-weui": "jquery-weui.min",
          "vue": "vue.min",
          "swiper": "swiper.min.new",
          "url": "base_url",
          "vue-resource":"vue-resource",
          "base64":"jquery.base64",
          "common":"../../js/wsc/common",
          "wx":"https://res.wx.qq.com/open/js/jweixin-1.2.0",
          "commonShare":"../../js/wsc/common_share",
      },
      shim: {//下面這些是非規范AMD
         'jquery-weui': {
              deps: ['Zepto']
          },
          'swiper': {
              deps: ['Zepto']
          },
          'vue': {
              exports: 'Vue'
          },
          'vue-resource': {
              deps: ['vue'],
          //exports: 'vue-resource'
          },
          'base64':{//不是AMD寫法
              deps: ['Zepto'],
          },
          'url': {
              deps: ['Zepto']
          },
          'commonShare': {
              deps: ['wx']
          },
      }

  });

  require(['Zepto','fastclick','jquery-weui', 'vue', "swiper", "url", "vue-resource","base64","common","wx","commonShare"], function (){
      var currentPage = $("#current-page").attr("current-page");
      var targetModule = $("#current-page").attr("target-module");
      if (targetModule) {
      // 頁面加載完畢后再執行相關業務代碼比較穩妥
          $(function () {
              if(currentPage == 'manage_address'){
              require(["city-data"], function (x) {
                  require(["city-picker"], function (x) {
                      require([targetModule], function (targetModule) {
                          // 不要在這里寫業務代碼
                          //全部統一調用init方法
                          //也就是每個模塊都暴露一個init方法用於事件監聽，頁面內容加載等
                          targetModule.init(currentPage);
                      });
                  })
              })
     }else{
          require([targetModule], function (targetModule) {
              // 不要在這里寫業務代碼
              //全部統一調用init方法
              //也就是每個模塊都暴露一個init方法用於事件監聽，頁面內容加載等
              targetModule.init(currentPage);
          });
        }
    });
        return;
  }
});

 

 

2、在頁面里

<div class="swiper-container2">
    <div class="swiper-wrapper" >
        <div class="swiper-slide PDB60">
            <!--輪播圖-->
             <div class="swiper-container carousel loop" >
                  <div class="swiper-wrapper">
                      <div class="swiper-slide" >
                          <img src="img/1.jpg" />
                      </div>
                      <div class="swiper-slide" >
                        <img src="img/1.jpg" />
                      </div>
                  </div>
                  <div class="swiper-pagination"></div>
            </div>
            <div class="swiper-slide" v-for="i in 8">Slide {{i}}</div>
        </div>
   </div>
</div>

//所有的頁面引入一個公共的require入口
<script src="../../static/js/require.js" id="current-page" defer async="true" data-main="../../static/js/main" current-page="wsc_index" target-module="../../js/wsc/wsc_index"></script>

　　

 

3、在每個頁面對應的js里

 

define(['Zepto','vue','common','vue-resource','swiper'],function($,Vue,com,VueResource,Swiper){
      var newCtrl = {};
      newCtrl.init = function (page) {
          Vue.use(VueResource);//這里得use一下
          var vue = new Vue({
              el: '.app',
              data: {
                  tabs:['熱門','男裝','鞋包','手機','電器','食品','百貨','服飾','tab..'],//頭部所有可以滑動的tab
                  currentTabIndex:0,//當前的tab的點擊
                  loop:'',//頁面的局部輪播圖
                  mySwiper:'',//頭部的tab
                  pageSwiper:'',//頁面的輪播
              },
              created: function () {
                  var that = this
                  that.footer_list=com.getFooterList();
              },
              mounted: function () {
                  var that = this;
                  that.initSwiper();
                  // 頁面的滾動
                  that.getPageSwiper();
              },
              methods: {
                  initSwiper: function(){
                      //頭部可滑動tab
                      this.mySwiper = new Swiper('#topNav', {
                          freeMode: true,
                          freeModeMomentumRatio: 0.5,
                          slidesPerView: 'auto',
                      });
                      //頁面局部小輪播圖
                      this.loop= new Swiper('.loop', {
                          pagination: '.swiper-pagination',
                          autoplay: 2000,
                          speed: 500,
                          loop: true,
                          onSlideChangeStart: function (swiper) {
                            swiper.startAutoplay();
                          },
                      })
                  },
                  swiperTab:function(swiper, e){
                      var that = this;
                      that.pageSwiper.slideTo(that.mySwiper.clickedIndex, 1000, false);//跳轉
                      //    e.preventDefault()
                      slide = that.mySwiper.slides[that.mySwiper.clickedIndex]
                      
                      slideLeft = slide.offsetLeft
                      slideWidth = slide.clientWidth
                      slideCenter = slideLeft + slideWidth / 2
                      // 被點擊slide的中心點
                      that.mySwiper.setWrapperTransition(300)
                          if (slideCenter < swiperWidth / 2) {
                          that.mySwiper.setWrapperTranslate(0)
                      } else if (slideCenter > maxWidth) {
                          that.mySwiper.setWrapperTranslate(maxTranslate)
                      } else {
                          nowTlanslate = slideCenter - swiperWidth / 2
                          that.mySwiper.setWrapperTranslate(-nowTlanslate)
                      }
                 },
                //點擊頭部的tab
                clickTab:function(index,item){
                    var that =this;
                    this.currentTabIndex=index;
                },
                getPageSwiper:function(){
                    var that = this;
                    swiperWidth = this.mySwiper.container[0].clientWidth
                    maxTranslate = this.mySwiper.maxTranslate();
                    maxWidth = -maxTranslate + swiperWidth / 2
                    this.pageSwiper = new Swiper('.swiper-container2', {
                        paginationClickable: true,
                        uniqueNavElements :false,
                        onSlideChangeStart: function(swiper){
                            that.currentTabIndex = swiper.activeIndex;
                            slide = that.mySwiper.slides[swiper.activeIndex];//獲取當前的slide節點
                            slideLeft = slide.offsetLeft
                            slideWidth = slide.clientWidth
                            slideCenter = slideLeft + slideWidth / 2
                            // 被點擊slide的中心點
                            that.mySwiper.setWrapperTransition(300)
                            if (slideCenter < swiperWidth / 2) {
                                that.mySwiper.setWrapperTranslate(0)
                            } else if (slideCenter >maxWidth) {
                                that.mySwiper.setWrapperTranslate(maxTranslate)
                            } else {
                                nowTlanslate = slideCenter - swiperWidth / 2
                                that.mySwiper.setWrapperTranslate(-nowTlanslate)
                            }
                        }
                   });
                
                },
              }
          })
      };
      newCtrl.login = function () {};
      return newCtrl;
  })

 

 

4、在css里

  #topNav {
    width: 100%;
    overflow: hidden;
    font: 16px/32px hiragino sans gb, microsoft yahei, simsun;
    border-bottom:1px solid #f8f8f8;
    height:44px;
    line-height:44px;
}
#topNav .swiper-slide {
    padding: 0 5px;
    letter-spacing:2px;
    width:3rem;
    text-align:center;
}
#topNav .swiper-slide span{
    font-size:15px;
    transition:all .3s ease;
    display:inline-block;
    height:90%;
}
#topNav .active span{
  transform:scale(1.1);
  color:#FF2D2D;
}
img{
    width:100%;
    line-height:0;
    max-height:150px;
}
.swiper-container2 {
  width: 100%;
  /*height: 90vh;*/
}
.swiper-container2 .swiper-slide{
   background: #fff;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

    /* Center slide text vertically */
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}