l-scroll.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. $(function(){
  2. var index = 0;
  3. function LScroll(opts){
  4. var options = {
  5. id: "",
  6. style: "",
  7. pullUpElId: ".l-pullUp",
  8. pullUpAction: undefined,
  9. pullDownElId: ".l-pullDown",
  10. pullDownAction: undefined,
  11. pullDownMsg1: "下拉刷新...",
  12. pullDownMsg2: "松手开始更新...",
  13. type: 1, // 1:正常 上拉加载 下拉刷新 2:下拉加载
  14. page: 1,
  15. scrollCallBack: undefined,
  16. scrollEndCallBack: undefined,
  17. top: 0,
  18. // IScroll 配置
  19. iscrollOpt: null
  20. }
  21. var g= this;
  22. g.options = $.extend(true, options, opts);
  23. g.iScroll = undefined;
  24. g.noMore = false;
  25. }
  26. LScroll.prototype.refresh = function(noMore){
  27. var g= this,
  28. p = g.options;
  29. if(typeof(noMore) == 'boolean'){
  30. g.noMore = noMore;
  31. }
  32. g.iScroll.refresh();
  33. }
  34. LScroll.prototype.scrollToElement = function(el, time, offsetX, offsetY, easing){
  35. var g= this,
  36. is = g.iScroll;
  37. is.scrollToElement(el, time, offsetX, offsetY, easing);
  38. }
  39. LScroll.prototype.refreshToEnd = function(time){
  40. var g= this,
  41. p = g.options,
  42. is = g.iScroll;
  43. is.refresh();
  44. time = time || 0;
  45. is.scrollTo(0, is.maxScrollY, time);
  46. }
  47. LScroll.prototype.refreshToTop = function(time){
  48. var g= this,
  49. p = g.options,
  50. is = g.iScroll;
  51. is.refresh();
  52. time = time || 0;
  53. is.scrollTo(0, 0, time);
  54. }
  55. LScroll.prototype.scrollToEnd = function(time){
  56. var g= this,
  57. p = g.options,
  58. is = g.iScroll;
  59. time = time || 0;
  60. var wrapperHeight = $(myScroll.iScroll.wrapper).height();
  61. is.scrollTo(0, wrapperHeight-is.scrollerHeight, time);
  62. }
  63. LScroll.prototype.init = function(){
  64. var g= this,
  65. p = g.options;
  66. p.id = p.id || ("wrapper"+ index);
  67. p.style = p.style || "";
  68. if(p.top){
  69. p.style = "top:"+ p.top + "px;"+p.style;
  70. }
  71. p._el.wrap('<div id="'+ p.id +'" class="l-wrapper" style="'+ p.style +'"><div class="l-scroller"></div></div>')
  72. var _el = $('#'+p.id);
  73. if(p.pullDownAction){
  74. $('#'+p.id+ ' div.l-scroller').prepend('<div class="l-pullDown"><label class="pullDownLabel">'+ p.pullDownMsg1+'</label></div>');
  75. }
  76. if(p.pullUpAction){
  77. $('#'+p.id+ ' div.l-scroller').append('<div class="l-pullUp l-loading"><label class="pullUpLabel">上拉加载更多...</label></div>');
  78. }
  79. var pullUpEl= _el[0].querySelector(p.pullUpElId),
  80. pullUpOffset,
  81. pullDownEl= _el[0].querySelector(p.pullDownElId),
  82. pullDownOffset;
  83. g.iScroll = new IScroll(_el[0], $.extend({
  84. probeType: 3
  85. },g.options.iscrollOpt));
  86. var myScroll = g.iScroll;
  87. myScroll.on('refresh', function(){
  88. $(pullUpEl).show();
  89. $(pullDownEl).show();
  90. if (pullUpEl) {
  91. if(g.noMore){
  92. pullUpEl.className = 'noMoreData';
  93. pullUpEl.querySelector('.pullUpLabel').innerHTML = '没有更多数据...';
  94. } else{
  95. pullUpEl.className = 'l-pullUp';
  96. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  97. }
  98. } else if(pullDownEl) {
  99. if(g.noMore){
  100. if(p.type == 2){
  101. pullDownEl.className = 'noMoreData';
  102. pullDownEl.querySelector('.pullDownLabel').innerHTML = "没有更多数据...";
  103. } else if(pullUpEl) {
  104. pullUpEl.className = 'noMoreData';
  105. pullUpEl.querySelector('.pullUpLabel').innerHTML = '没有更多数据...';
  106. }
  107. } else{
  108. pullDownEl.className = 'l-pullDown';
  109. pullDownEl.querySelector('.pullDownLabel').innerHTML = p.pullDownMsg1;
  110. if(pullUpEl){
  111. pullUpEl.className = 'l-pullUp';
  112. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  113. }
  114. }
  115. }
  116. });
  117. myScroll.on('scroll', function(){
  118. if (pullDownEl && this.y > 30 && !pullDownEl.className.match('l-flip')) {
  119. if(pullDownEl.className.match('noMoreData'))
  120. return;
  121. pullDownEl.className = 'l-flip';
  122. pullDownEl.querySelector('.pullDownLabel').innerHTML = p.pullDownMsg2 ;
  123. this.minScrollY = pullDownEl.offsetHeight;
  124. } else if (pullDownEl && this.y < 30 && pullDownEl.className.match('l-flip')) {
  125. if(pullDownEl.className.match('noMoreData'))
  126. return;
  127. pullDownEl.className = 'l-pullDown';
  128. pullDownEl.querySelector('.pullDownLabel').innerHTML = p.pullDownMsg1;
  129. // this.minScrollY = pullDownOffset;
  130. } else if (pullUpEl && this.y < (this.maxScrollY - 30) && !pullUpEl.className.match('l-flip')) {
  131. if(pullUpEl.className.match('noMoreData'))
  132. return;
  133. pullUpEl.className = 'l-flip';
  134. pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始加载...';
  135. this.maxScrollY = this.maxScrollY;
  136. } else if (pullUpEl && this.y > (this.maxScrollY + 30) && pullUpEl.className.match('l-flip')) {
  137. if(pullUpEl.className.match('noMoreData'))
  138. return;
  139. pullUpEl.className = 'l-pullDown';
  140. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
  141. this.maxScrollY = pullUpEl.offsetHeight;
  142. }
  143. if(p.scrollCallBack)
  144. p.scrollCallBack(this);
  145. });
  146. myScroll.on('scrollEnd', function(){
  147. if (pullDownEl && pullDownEl.className.match('l-flip')) {
  148. if(pullDownEl.className.match('noMoreData'))
  149. return;
  150. pullDownEl.className = 'l-loading';
  151. pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
  152. if(p.type == 2)
  153. ++p.page;
  154. else
  155. p.page = 1;
  156. p.noMore = false;
  157. pullDownEl.className= "l-loading";
  158. if(p.pullDownAction) p.pullDownAction(g);
  159. } else if (pullUpEl && pullUpEl.className.match('l-flip')) {
  160. if(pullUpEl.className.match('noMoreData'))
  161. return;
  162. pullUpEl.className = 'l-loading';
  163. pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
  164. ++p.page;
  165. if(p.pullUpAction) p.pullUpAction(g);
  166. }
  167. if(p.scrollEndCallBack)
  168. p.scrollEndCallBack(this);
  169. });
  170. // setTimeout(function () { p._el[0].style.left = '0'; }, 800);
  171. return myScroll;
  172. }
  173. $.fn.lscroll = function (opts) {
  174. index++;
  175. opts = opts || {};
  176. opts._el = $(this);
  177. var o = new LScroll(opts);
  178. var myScroll = o.init();
  179. this.data("LScroll", myScroll);
  180. return o;
  181. };
  182. $.fn.getLScroll = function () {
  183. return this.data("LScroll");
  184. };
  185. document.addEventListener('touchmove', function (e) {
  186. //判别输入框的id
  187. var that = e;
  188. if(that.target.parentNode.parentNode.id && that.target.id != "input_content"){
  189. if(that.target.parentNode.parentNode.id != "history_search"){
  190. that.preventDefault();
  191. }
  192. }else{
  193. if(that.target.id != "input_content"){
  194. that.preventDefault();
  195. }
  196. }
  197. }, false);
  198. })