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;*/ }