Tag:仿今日头条
Article From:https://www.cnblogs.com/lmxxlm-123/p/9122554.html

 

 

1、In main.js

/*The entrance of the main module is used in conjunction with 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’:{//Not AMD writing
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) {
// It is safer to execute relevant business codes after the page is loaded.
$(function () {
if(currentPage == ‘manage_address’){
require([“city-data”], function (x) {
require([“city-picker”], function (x) {
require([targetModule], function (targetModule) {
// Do not write business code here
//All unified call to init method
//That is, each module exposes a init method for event listener, page content loading, etc.
targetModule.init(currentPage);
});

})

})
}else{
require([targetModule], function (targetModule) {
// Do not write business code here
//All unified call to init method
//That is, each module exposes a init method for event listener, page content loading, etc.
targetModule.init(currentPage);
});
}

});
return;
}

});

 

2、On the page

 

<div class=”content “>
<!–Head Tab–>
<div id=”topNav” class=”swiper-container” @click =”swiperTab”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide ” @click=”clickTab(index,item)” v-for=”(item,index) in tabs”><span :class=”currentTabIndex==index?’active lowSideline’:””>{{item}}</span></div>
</div>
</div>

<!– Swiper –>
<div class=”swiper-container2″>
<div class=”swiper-wrapper” >
<div class=”swiper-slide PDB60″>
<!–Sowing diagram –>
<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>

//All pages are introduced to a common require entry

<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、In each page corresponding to the JS

 

/*Author: lmx*/

define([‘Zepto’,’vue’,’common’,’vue-resource’,’swiper’],function($,Vue,com,VueResource,Swiper){

var newCtrl = {};
newCtrl.init = function (page) {
Vue.use(VueResource);//Here’s a use
var vue = new Vue({
el: ‘.app’,
data: {
tabs:[‘Hot ‘,’ men’s wear ‘,’ shoes bag ‘,’ mobile phone ‘,’ electrical appliances’, ‘food’, ‘department store’, ‘dress’,’tab..’] / / head all sliding tab.
currentTabIndex:0,//Current tab clicks
loop:”,//Local map of the page
mySwiper:”,//Tab of the head
pageSwiper:”,//Page’s broadcast

},
created: function () {
var that = this
that.footer_list=com.getFooterList();
},
mounted: function () {
var that = this;
that.initSwiper();
// Page scrolling
that.getPageSwiper();
},
methods: {
initSwiper: function(){
//Head can slide tab
this.mySwiper = new Swiper(‘#topNav’, {
freeMode: true,
freeModeMomentumRatio: 0.5,
slidesPerView: ‘auto’,

});

//Page local small round sowing map
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
// The center point of the clicked 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)
}

},
//Click on the tab in the head
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];//Get the current slide node
slideLeft = slide.offsetLeft
slideWidth = slide.clientWidth
slideCenter = slideLeft + slideWidth / 2
// The center point of the clicked 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、In 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;*/
}

Leave a Reply

Your email address will not be published. Required fields are marked *