Authored by 王水玲

星潮教室优化,去除下拉刷新

... ... @@ -24,8 +24,6 @@ const headTab = [
}
];
let md5Str = '';
const _processPublicData = (req, title) => {
let renderData = {
module: 'guang',
... ... @@ -51,7 +49,6 @@ let index = (req, res, next) => {
pageHeadTab[0].cur = true;
starModel.getIndexData().then((result) => {
md5Str = result.md5;
res.render('star/index', _.assign({
page: 'star',
isStarIndexPage: true,
... ... @@ -61,31 +58,24 @@ let index = (req, res, next) => {
data: result.ads
},
starAvatar: result.starAvatar ? result.starAvatar : '',
articles: result.articles,
md5: result.md5
articles: result.articles
}, _processPublicData(req, '星潮教室')));
}).catch(next);
};
let getIndexHtml = (req, res, next) => {
starModel.getIndexData().then((result) => {
if (md5Str !== result.md5) {
md5Str = result.md5;
res.render('star/index-html', _.assign({
layout: false,
content: {
focus: true,
data: result.ads
},
starAvatar: result.starAvatar ? result.starAvatar : '',
articles: result.articles
}));
} else {
res.json();
}
}).catch(next);
};
// let getIndexHtml = (req, res, next) => {
// starModel.getIndexData().then((result) => {
// res.render('star/index-html', _.assign({
// layout: false,
// content: {
// focus: true,
// data: result.ads
// },
// starAvatar: result.starAvatar ? result.starAvatar : '',
// articles: result.articles
// }));
// }).catch(next);
// };
/**
* 星专题
... ... @@ -214,7 +204,6 @@ let detailList = (req, res, next) => {
module.exports = {
index,
getIndexHtml,
special,
collocation,
collocationList,
... ...
... ... @@ -13,7 +13,6 @@ const star = require(cRoot + '/star');
const router = express.Router(); // eslint-disable-line
router.get('/star', star.index); // 星潮教室首页
router.get('/star/getIndexHtml', star.getIndexHtml); // 星潮教室首页
router.get('/star/detail', star.detail); // 明星文章专区
router.get('/star/detailList', star.detailList); // 明星文章专区文章Ajax请求
router.get('/star/special', star.special); // 星潮教室星专题
... ...
<div class="star-page yoho-page">
{{> star/head-tab}}
<div class="loading-tip">下拉刷新</div>
<div class="star-main">
<div class="main-content">
{{> star/index-html}}
</div>
{{> star/index-html}}
</div>
</div>
... ...
<div class="star-wrap">
<div class="star-content">
{{#content}}
{{#if focus}}
{{> resources/banner-top}}
{{/if}}
{{/content}}
{{#content}}
{{#if focus}}
{{> resources/banner-top}}
{{/if}}
{{/content}}
<div class="avatar-wrap">
<div class="avatar-swiper avatar">
<ul class="clearfix swiper-wrapper">
{{# starAvatar}}
<li class="swiper-slide">
<a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a>
</li>
{{/ starAvatar}}
</ul>
</div>
<div class="avatar-wrap">
<div class="avatar-swiper avatar">
<ul class="clearfix swiper-wrapper">
{{# starAvatar}}
<li class="swiper-slide">
<a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a>
</li>
{{/ starAvatar}}
</ul>
</div>
</div>
<ul class="star-info clearfix">
{{#each articles}}
<li data-id="{{id}}">
<div class="star-avatar">
{{#if isSwiper}}
<div class="article-avatar-swiper">
<ul class="clearfix swiper-wrapper">
{{#each tags}}
<li class="swiper-slide">
<a href='{{avatarUrl}}'>
<div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
<p class="name">{{tagName}}</p>
</a>
</li>
{{/each}}
</ul>
</div>
{{else}}
{{# tags}}
<a href="{{avatarUrl}}">
<div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
<p class="name">{{tagName}}</p>
</a>
{{/ tags}}
{{/if}}
</div>
<a class="star-article" href='{{url}}'>
<i class="article-arrow"></i>
<h2 class="article-title">{{title}}</h2>
<div class="artice-cont">
<p>{{articeTxt}}</p>
<div class="artice-imgs-area">
<img src="{{image src 266 266}}" />
<ul class="star-info">
{{#each articles}}
<li data-id="{{id}}">
<div class="star-avatar">
{{#if isSwiper}}
<div class="article-avatar-swiper">
<ul class="clearfix swiper-wrapper">
{{#each tags}}
<li class="swiper-slide">
<a href='{{avatarUrl}}'>
<div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
<p class="name">{{tagName}}</p>
</a>
</li>
{{/each}}
</ul>
</div>
{{else}}
{{# tags}}
<a href="{{avatarUrl}}">
<div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div>
<p class="name">{{tagName}}</p>
</a>
{{/ tags}}
{{/if}}
</div>
<a class="star-article" href='{{url}}'>
<i class="article-arrow"></i>
<h2 class="article-title">{{title}}</h2>
<div class="artice-cont">
<p>{{articeTxt}}</p>
<div class="artice-imgs-area">
<img data-original="{{image src 266 266}}" class="lazy"/>
{{!-- <ul class="artice-imgs">
{{#each articeImg}}
<li><img src="{{image . 640 640}}" /></li>
{{/each}}
</ul> --}}
{{!-- <ul class="artice-imgs">
{{#each articeImg}}
<li><img src="{{image . 640 640}}" /></li>
{{/each}}
</ul> --}}
</div>
</div>
<div class="artice-o">
<span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
<span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="artice-o">
<span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
<span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
{{!-- <div class="view-img">
... ...
... ... @@ -13,15 +13,13 @@ var $ = require('yoho-jquery'),
PullRefresh = require('../plugin/pull-refresh');
var $window = $(window),
stopLoading = false,
$mainContent = $('.main-content'),
$headTab = $('.head-tab'),
headTabH = $headTab.height(),
scrollH = $(window).height() - headTabH,
$loadingTip = $('.loading-tip'),
$starMain = $('.star-main'),
$bannerTop = $('.banner-top'),
$starArticle = $('.star-article'),
$avatarWrap = $('.avatar-wrap'),
bannerLen = $('.avatar-wrap').find('.swiper-slide').length,
u = navigator.userAgent,
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
/*
$swiperView = $('.swiper-view'),
$viewImg = $('.view-img'),
... ... @@ -32,22 +30,19 @@ var $window = $(window),
var mySwiper;
*/
var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,
$avatarClone, $starArticle, $avatarWrap, starIScroll;
var res, avatarSwiper, avatarSwiperClone, $avatarClone;
var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;
require('../common');
if ($window.width() === 375 && isiOS) {
swiperNum = 32;
}
require('../common');
lazyLoad($('img.lazy'));
ellipsis.init();
$window.on('mousewheel', false);
// 限制标题字数
function txtLimit(dom, item1, item2) {
var $title = dom.find(item1),
... ... @@ -79,7 +74,7 @@ function setAvatar($userAvatar) {
// 明星头像点击居中显示或跳转
function bindAvatar(dom) {
avatarKey = dom.index();
var avatarKey = dom.index();
if (!dom.hasClass('swiper-slide-active')) {
if (avatarKey >= (2 * bannerLen + 1)) {
... ... @@ -97,7 +92,16 @@ function bindAvatar(dom) {
}
}
function setIndexAction() {
// 初始化首页各种效果
function initAction() {
$starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
$avatarClone = $('.avatar-clone');
// 限制标题字数
$('.cont-area').each(function() {
txtLimit($(this), '.title', '.cont-txt');
});
$('.avatar').each(function(key, item) {
$(item).addClass('avatar-' + key);
});
... ... @@ -164,85 +168,12 @@ function setIndexAction() {
return false;
});
$('img').on('load', function() {
starIScroll.iScroll.refresh();
});
cloneAvatarInit();
}
function initAction() {
$starArticle = $('.star-article');
$avatarWrap = $('.avatar-wrap');
bannerLen = $('.avatar-wrap').find('.swiper-slide').length;
if ($avatarClone) {
$avatarClone.remove();
}
$loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
$avatarClone = $('.avatar-clone');
// 限制标题字数
$('.cont-area').each(function() {
txtLimit($(this), '.title', '.cont-txt');
});
lazyLoad($('img.lazy'));
setIndexAction();
}
// 首页数据请求
getIndexHtml = function() {
loading.showLoadingMask();
$.ajax({
url: '/guang/star/getIndexHtml',
dataType: 'html',
success: function(data) {
stopLoading = false;
if (data) {
if (avatarSwiperClone) {
avatarSwiperClone.destroy(true, true);
avatarSwiperClone = '';
}
$mainContent.html(data);
initAction();
}
loading.hideLoadingMask();
},
error: function() {
tip.show('网络断开连接了~');
}
});
};
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) {
// 悬浮明星头像
function cloneAvatarInit() {
if ($window.scrollTop() >= $bannerTop.height() + parseInt($starMain.find('.avatar').css('margin-top'))) {
$avatarClone.show();
if (!avatarSwiperClone) {
... ... @@ -267,15 +198,16 @@ starIScroll.iScroll.on('scroll', function() {
avatarSwiperClone.params.control = avatarSwiper;
avatarSwiper.params.control = avatarSwiperClone;
}
}
if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) {
} else {
$avatarClone.hide();
}
});
}
initAction();
starIScroll.iScroll.on('scrollEnd', function() {
$loadingTip.slideUp();
$window.scroll(function() {
cloneAvatarInit();
});
window.setCookie('guangStarUid', window.queryString.uid);
... ...
... ... @@ -56,7 +56,7 @@
}
}
.star-content {
.star-wrap {
background: #000;
}
... ... @@ -418,7 +418,7 @@
.star-index-bg {
background: #000;
overflow: hidden;
/*overflow: hidden;*/
.star-page {
background: #000;
... ...