diff --git a/mip-fn-comment-praise/README.md b/mip-fn-comment-praise/README.md new file mode 100644 index 00000000..7fa502ad --- /dev/null +++ b/mip-fn-comment-praise/README.md @@ -0,0 +1,39 @@ +# mip-fn-comment-praise + +

蜂鸟网WAP站点赞功能组件

+ +## 示例 +```html + +``` + +标题|内容 +----|---- +类型|通用 +所需脚本|http://mipcache.bdstatic.com/static/v1/mip-fn-comment-praise/mip-fn-comment-praise.js + +## 属性 +### praiseId +说明：点击评论所属id +必选项：是 +类型：Number + +### praiseKindid +说明： +必选项：是 +类型：Number + +### praiseNum +说明：返回地址 +必选项：是 +类型：字符串 +取值范围：Number + +### url +说明：接口请求地址 +必选项：是 +类型：字符串 +取值范围：URL + + + diff --git a/mip-fn-comment-praise/mip-fn-comment-praise.js b/mip-fn-comment-praise/mip-fn-comment-praise.js new file mode 100644 index 00000000..2caec5af --- /dev/null +++ b/mip-fn-comment-praise/mip-fn-comment-praise.js @@ -0,0 +1,97 @@ +/** + * @file mip-fn-praise 组件 + * @author wangyan + */ +define(function (require) { + var zepto = require('zepto'); + var customElem = require('customElement').create(); + + // 生命周期 function list，根据组件情况选用，（一般情况选用 build、firstInviewCallback） start + // build 方法，元素插入到文档时执行，仅会执行一次 + customElem.prototype.build = function () { + var element = this.element; + var oSpan = document.createElement('span'); + var num = element.getAttribute('praisenum'); + var id = element.getAttribute('praiseid'); + var kindid = element.getAttribute('praiseKindid'); + var url = element.getAttribute('url'); + + if (num === 0) { + num = ''; + } + oSpan.innerHTML = num || 0; + + element.append(oSpan); + + element.onclick = function () { + var oThis = this; + var className = $(this).hasClass('disable-tag'); + if (className) { + return false; + } + if (id > 0 && kindid > 0) { + $.ajax({ + url: url, + type: 'post', + data: { + 'action': 'zan', + 'id': id, + 'kindid': kindid + }, + dataType: 'json', + success: function (data) { + if (data.code === 1) { + var num = oThis.getAttribute('praisenum'); + $(oThis).addClass('disable-tag'); + if (num === '') { + var num = 1; + } else { + var numNew = parseInt(num, 10) + 1; + } + $(oThis).find('span').html(numNew); + } + }, + error: function () { + alert('网络通讯异常，请稍后再试。'); + return false; + } + }); + } else { + alert('参数错误。'); + } + }; + }; + + // 创建元素回调 + customElem.prototype.createdCallback = function () { + // console.log('created'); + }; + // 向文档中插入节点回调 + customElem.prototype.attachedCallback = function () { + // console.log('attached'); + }; + // 从文档中移出节点回调 + customElem.prototype.detachedCallback = function () { + // console.log('detached'); + }; + // 第一次进入可视区回调,只会执行一次，做懒加载，利于网页速度 + customElem.prototype.firstInviewCallback = function () { + // console.log('first in viewport'); + }; + // 进入或离开可视区回调，每次状态变化都会执行 + customElem.prototype.viewportCallback = function (isInView) { + // true 进入可视区;false 离开可视区 + // console.log(isInView); + }; + // 控制viewportCallback、firstInviewCallback是否提前执行 + // 轮播图片等可使用此方法提前渲染 + customElem.prototype.prerenderAllowed = function () { + // 判断条件，可自定义。返回值为true时,viewportCallback、firstInviewCallback会在元素build后执行 + return !!this.isCarouselImg; + }; + // 生命周期 function list，根据组件情况选用 end + + + return customElem; +}); + diff --git a/mip-fn-comment-praise/mip-fn-comment-praise.less b/mip-fn-comment-praise/mip-fn-comment-praise.less new file mode 100644 index 00000000..dea3586d --- /dev/null +++ b/mip-fn-comment-praise/mip-fn-comment-praise.less @@ -0,0 +1,18 @@ +mip-fn-comment-praise { + float: right; + color: #999999; + font-size: 0.7rem; + line-height: 1.2rem; +} + +mip-fn-comment-praise:before { + content: ''; + float: right; + width: 0.7rem; + height: 0.7rem; + margin: 0.15rem 0 0 0.5rem; + background: url(data:image/png; + base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAMAAACfvvDEAAAAh1BMVEUAAADW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tZjonpvAAAALHRSTlMAgHAQoeEv7sFQuQPnhhTy6tx9dko7Ngj40LOskWQeDtXNjFzInJmVQiQabWyJgZEAAAFZSURBVDjLrZTZkoJADEVBEZQGZVFxVHBfJ///fXM7LFaXTpMHzwOkOofQJIDziekxJQq8yuljmRCT+D3iE2JNWtjNC5zRNk5x+rWKKiDa77BZnA9Ws0KtUgdbBDub6UOY6GCCYCkxOZiLzIoDC3MIi9clFmIIT76kZ59FhI5zlMOcWswj8hlHIVFkEXWhgCtNV0Tev94iJHDqipsP9LiF45pzQpotL5cERsze414sZ2TisqhWxuIFb9XY9M5tXyIywI5xjH6Azqwz/zWqq9dyIJ5re78BgqHzmZOuIjDBhmgmMzMkv1uTxxWKTJfHJTCLBNNSApOblDsSE51fDSXmApmrIzE3yPgSsyLdIokZIzFvzNxmFgFRqhpzYDNLFiTmHiPfScw7f1gSc43lR2eGLgj5b6lK1+DGb3tNQB0Bt+SNO3tGLtPzeMNzGlQ8aypmesYRmYxy1Yh//tFS8zL07SgAAAAASUVORK5CYII=) no-repeat 50% 50%; -webkit-background-size: 0.7rem 0.7rem; + background-size: 0.7rem 0.7rem; +} + \ No newline at end of file diff --git a/mip-fn-comment-praise/package.json b/mip-fn-comment-praise/package.json new file mode 100644 index 00000000..c5be3cd7 --- /dev/null +++ b/mip-fn-comment-praise/package.json @@ -0,0 +1,12 @@ +{ + "name": "mip-fn-comment-praise", + "version": "1.0.0", + "description": "蜂鸟网WAP站点赞", + "author": { + "name": "fn", + "email": "tech@fengniao.com" + }, + "engines": { + "mip": ">=1.1.0" + } +} \ No newline at end of file diff --git a/mip-fn-show-allarticles/README.md b/mip-fn-show-allarticles/README.md new file mode 100644 index 00000000..187851f1 --- /dev/null +++ b/mip-fn-show-allarticles/README.md @@ -0,0 +1,32 @@ +# mip-fn-show-allarticles + +

蜂鸟网WAP站点击加载更多文章

+ +## 示例 +```html + +``` + +标题|内容 +----|---- +类型|通用 +所需脚本|http://mipcache.bdstatic.com/static/v1/mip-fn-show-allarticles/mip-fn-show-allarticles.js + +## 属性 +### dataSrc +说明：请求地址 +必选项：是 +类型：字符串 +取值范围：URL + +### articleid +说明：文章id +必选项：是 +类型：字符串 + +### guanlian +说明： +必选项：是 +类型：数组 + + diff --git a/mip-fn-show-allarticles/mip-fn-show-allarticles.js b/mip-fn-show-allarticles/mip-fn-show-allarticles.js new file mode 100644 index 00000000..7c5edc74 --- /dev/null +++ b/mip-fn-show-allarticles/mip-fn-show-allarticles.js @@ -0,0 +1,120 @@ +/** + * @file mip-fn-show-allarticles 组件 + * @author fn + */ +define(function (require) { + var $ = require('zepto'); + var customElem = require('customElement').create(); + + // 生命周期 function list，根据组件情况选用，（一般情况选用 build、firstInviewCallback） start */ + // build 方法，元素插入到文档时执行，仅会执行一次 + customElem.prototype.build = function () { + // this.element 可取到当前实例对应的 dom 元素 + var element = this.element; + var dataSrc = element.getAttribute('dataSrc') || ''; + var articleid = element.getAttribute('articleid') || ''; + var guanlian = element.getAttribute('guanlian') || ''; + + if (dataSrc === '' && articleid === '' && guanlian === '') { + return; + } + + var showAllLink = '
' + + '继续阅读全文' + + ''; + + $(element).html(showAllLink); + + var moreDetail = $(element).find('#more-detail'); + var load = $(element).find('#load'); + var article = $(element).find('article'); + + // 加载 + var loadMore = true; + + guanlian = JSON.parse(guanlian); + + var pagesize = 0; + var loadMoreFlg = 0; // 加载第一页的flg + var loadNextPage = 0; // 加载下一页的flg + $(function () { + if (guanlian.length === 0) { + moreDetail.hide(); + } + }); + moreDetail.click(function () { + load.show(); + $(this).hide(); + loadMoreFlg = 1; + loadMoreData(); + }); + window.addEventListener('scroll', nextPage); + // 判断当前是否要加载下一页的内容 + + function nextPage() { + if (loadNextPage === 1) { + // 内容的高度 + var contentHeight = document.getElementById('article-content').offsetHeight; + + var scrollTop = 0; // 滚动条到顶部的距离 + if (document.documentElement && document.documentElement.scrollTop) { + scrollTop = document.documentElement.scrollTop; + } else if (document.body) { + scrollTop = document.body.scrollTop; + } + if (scrollTop >= contentHeight - 400) { + loadNextPage = 0; // 正在加载下一页，关闭滚动加载 + loadMoreData(); + } else { + return false; + } + } else { + return false; + } + } + // ajax 加载更多文章 + + function loadMoreData() { + if (loadMoreFlg === 1) { + if (guanlian.length > 0) { + if (pagesize <= guanlian.length - 1) { + load.show(); + $.ajax({ + // url: "/ajax/wapajax.php?a=" + Math.random(), + url: dataSrc + '?a=' + Math.random(), + type: 'POST', + data: { + 'documentid': guanlian[pagesize], + 'scroll': '5' + }, + dataType: 'html', + success: function (data) { + if (data) { + article.append(data); + } + pagesize++; + loadNextPage = 1; // 本页已经加载完毕，开启滚动加载flg + load.hide(); + }, + error: function () { + alert('接收数据失败'); + } + }); + } else { + // 页面已经加载完 将滚动加载flg设成0 + loadNextPage = 0; + load.hide(); + return false; + } + } else { + return false; + } + } + } + }; + return customElem; + +}); + diff --git a/mip-fn-show-allarticles/package.json b/mip-fn-show-allarticles/package.json new file mode 100644 index 00000000..5d1cf798 --- /dev/null +++ b/mip-fn-show-allarticles/package.json @@ -0,0 +1,13 @@ +{ + "name": "mip-fn-show-allarticles", + "version": "1.0.0", + "description": "蜂鸟网WAP站点击加载更多文章", + "author": { + "name": "fn", + "email": "tech@fengniao.com" + }, + "engines": { + "mip": ">=1.1.0" + } +} +