fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 62314d36f80063eee7a4a9f7fa27b86378113ffa 1 parent d1cc664c

星潮优化

Inline Side-by-side
Showing 6 changed files with 71 additions and 71 deletions
... ... @@ -3,7 +3,10 @@
<div class="swiper-num swiper-num1"></div>
<div class="swiper-num swiper-num2"></div>
<div class="swiper-num swiper-num3"></div>
<div class="loading-tip">下拉刷新</div>
<div class="star-main">
<div class="main-content">
{{> star/index-html}}
</div>
</div>
</div>
... ...
<div class="loading-tip">下拉刷新</div>
<div class="star-wrap">
<div class="star-content">
{{#content}}
... ...
... ... @@ -18,7 +18,7 @@
(function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=640){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/640)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
</script>
{{#if devEnv}}
<link rel="stylesheet" href="//localhost:5001/css/index.css">
<link rel="stylesheet" href="//172.16.6.210:5001/css/index.css">
{{^}}
<link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/index.css">
{{/if}}
... ... @@ -41,8 +41,8 @@
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
{{/wechatShare}}
{{#if devEnv}}
<script src="//localhost:5001/libs.js"></script>
<script src="//localhost:5001/{{module}}.{{page}}.js"></script>
<script src="//172.16.6.210:5001/libs.js"></script>
<script src="//172.16.6.210:5001/{{module}}.{{page}}.js"></script>
{{^}}
<script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/libs.js"></script>
<script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/{{module}}.{{page}}.js"></script>
... ...
... ... @@ -59,7 +59,7 @@ function massageAJAX(pageData) {
}
function scrollHandler() {
if (!stopLoading && ($(window).scrollTop() + $(window).height() > $('body').height() - 100)) {
if (!stopLoading && ($(window).scrollTop() + $(window).height() > $('body').height() * 0.75)) {
stopLoading = true;
page++;
massageAJAX(page);
... ...
... ... @@ -14,10 +14,11 @@ var $ = require('yoho-jquery'),
var $window = $(window),
stopLoading = false,
$starMain = $('.star-main'),
$mainContent = $('.main-content'),
$headTab = $('.head-tab'),
headTabH = $headTab.height(),
scrollH = $(window).height() - headTabH;
scrollH = $(window).height() - headTabH,
$loadingTip = $('.loading-tip');
/*
$swiperView = $('.swiper-view'),
... ... @@ -29,7 +30,8 @@ var $window = $(window),
var mySwiper;
*/
var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml, $avatarClone, $starArticle;
var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,
$avatarClone, $starArticle, $avatarWrap, starIScroll;
var swiperNum = ($('.swiper-num2').width() - $('.swiper-num1').width()) +
($('.swiper-num3').width() - $('.swiper-num1').width()) / 2;
... ... @@ -91,66 +93,6 @@ function bindAvatar(dom) {
}
function setIndexAction() {
var starIScroll;
var $loadingTip = $('.loading-tip'),
$avatarWrap = $('.avatar-wrap:not(.avatar-clone)');
// 下拉刷新，上拉加载
starIScroll = new PullRefresh('.star-wrap', {
height: scrollH,
pullDown: function() {
if (!stopLoading) {
stopLoading = true;
getIndexHtml();
}
}
});
starIScroll.iScroll.on('scrollStart', function() {
// 下拉
if (this.directionY === -1) {
$loadingTip.slideDown();
}
});
starIScroll.iScroll.on('scroll', function() {
if ($avatarWrap.offset().top <= headTabH) {
$avatarClone.show();
if (!avatarSwiperClone) {
avatarSwiperClone = new Swiper('.avatar-0', {
loop: true,
initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,
centeredSlides: true,
slidesPerView: 'auto',
loopedSlides: bannerLen,
spaceBetween: 10,
slidesOffsetBefore: -swiperNum,
watchSlidesProgress: true,
watchSlidesVisibility: true,
onInit: function() {
$('.avatar-0 li').on('click', function() {
res = bindAvatar($(this));
return res;
});
}
});
avatarSwiperClone.params.control = avatarSwiper;
avatarSwiper.params.control = avatarSwiperClone;
}
}
if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) {
$avatarClone.hide();
}
});
starIScroll.iScroll.on('scrollEnd', function() {
$loadingTip.slideUp();
});
$('.avatar').each(function(key, item) {
$(item).addClass('avatar-' + key);
});
... ... @@ -229,13 +171,14 @@ function setIndexAction() {
function initAction() {
$starArticle = $('.star-article');
$avatarWrap = $('.avatar-wrap');
bannerLen = $('.avatar-wrap').find('.swiper-slide').length;
if ($avatarClone) {
$avatarClone.remove();
}
$starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
$loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
$avatarClone = $('.avatar-clone');
... ... @@ -265,7 +208,7 @@ getIndexHtml = function() {
avatarSwiperClone = '';
}
$starMain.html(data);
$mainContent.html(data);
initAction();
}
... ... @@ -280,6 +223,61 @@ getIndexHtml = function() {
initAction();
// 下拉刷新，上拉加载
starIScroll = new PullRefresh('.star-main', {
height: scrollH,
pullDown: function() {
if (!stopLoading) {
stopLoading = true;
getIndexHtml();
}
}
});
starIScroll.iScroll.on('scrollStart', function() {
// 下拉
if (this.directionY === -1) {
$loadingTip.slideDown();
}
});
starIScroll.iScroll.on('scroll', function() {
if ($avatarWrap.offset().top <= headTabH) {
$avatarClone.show();
if (!avatarSwiperClone) {
avatarSwiperClone = new Swiper('.avatar-0', {
loop: true,
initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,
centeredSlides: true,
slidesPerView: 'auto',
loopedSlides: bannerLen,
spaceBetween: 10,
slidesOffsetBefore: -swiperNum,
watchSlidesProgress: true,
watchSlidesVisibility: true,
onInit: function() {
$('.avatar-0 li').on('click', function() {
res = bindAvatar($(this));
return res;
});
}
});
avatarSwiperClone.params.control = avatarSwiper;
avatarSwiper.params.control = avatarSwiperClone;
}
}
if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) {
$avatarClone.hide();
}
});
starIScroll.iScroll.on('scrollEnd', function() {
$loadingTip.slideUp();
});
window.setCookie('guangStarUid', window.queryString.uid);
// 明星动态文章图片相关操作
... ...
.star-page {
background: #333;
position: relative;
a {
text-decoration: none;
... ... @@ -121,7 +122,6 @@
}
.star-main {
position: relative;
margin-top: 88px;
}
... ...