类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子

1、在main.js里

/*主模块的入口结合require一起使用*/
require.config({
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: {
'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入口

3、在每个页面对应的js里

/*作者：lmx*/

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)
console.log("maxTranslate:"+maxTranslate)
} else {
nowTlanslate = slideCenter - swiperWidth / 2
console.log(nowTlanslate)
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;*/
}

类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子

猜你喜欢