Scroll
Brightcells
共有 31 个文件被更改，包括 225 次插入 和 41 次删除
+ 85
- 0
page/static/page/css/scroll_loader.css
@@ -0,0 +1,85 @@ |
||
| 1 |
+.scroller {
|
|
| 2 |
+ min-height: 100%; |
|
| 3 |
+ padding-left: 10px; |
|
| 4 |
+ padding-right: 10px; |
|
| 5 |
+} |
|
| 6 |
+ |
|
| 7 |
+.scroller .items {
|
|
| 8 |
+} |
|
| 9 |
+ |
|
| 10 |
+.scroller .item {
|
|
| 11 |
+ padding: 5px; |
|
| 12 |
+ margin-bottom: 10px; |
|
| 13 |
+ background: white; |
|
| 14 |
+ box-sizing: border-box; |
|
| 15 |
+ border-radius: 4px; |
|
| 16 |
+} |
|
| 17 |
+ |
|
| 18 |
+.scroller .content_wrap {
|
|
| 19 |
+ padding-bottom: 5px; |
|
| 20 |
+} |
|
| 21 |
+ |
|
| 22 |
+.scroller .image_wrap {
|
|
| 23 |
+ float: left; |
|
| 24 |
+ width: 84px; |
|
| 25 |
+ height: 84px; |
|
| 26 |
+ margin-right: 5px; |
|
| 27 |
+ z-index: 1; |
|
| 28 |
+} |
|
| 29 |
+ |
|
| 30 |
+.scroller .text_wrap {
|
|
| 31 |
+ padding: 6px 18px 6px; |
|
| 32 |
+} |
|
| 33 |
+ |
|
| 34 |
+.scroller .pointer_wrap {
|
|
| 35 |
+ text-align: right; |
|
| 36 |
+ height: 0; |
|
| 37 |
+} |
|
| 38 |
+ |
|
| 39 |
+.scroller .pointer_wrap:after {
|
|
| 40 |
+ content: " "; |
|
| 41 |
+ display: inline-block; |
|
| 42 |
+ -webkit-transform: rotate(45deg); |
|
| 43 |
+ transform: rotate(45deg); |
|
| 44 |
+ height: 10px; |
|
| 45 |
+ width: 10px; |
|
| 46 |
+ border-width: 2px 2px 0 0; |
|
| 47 |
+ border-color: #C8C8CD; |
|
| 48 |
+ border-style: solid; |
|
| 49 |
+ border-radius: 2px; |
|
| 50 |
+ position: relative; |
|
| 51 |
+ top: -40px; |
|
| 52 |
+ left: -3px; |
|
| 53 |
+ margin-left: .3em; |
|
| 54 |
+} |
|
| 55 |
+ |
|
| 56 |
+.scroller .image, #items img {
|
|
| 57 |
+ width: 84px; |
|
| 58 |
+ height: 84px; |
|
| 59 |
+ display: block; |
|
| 60 |
+} |
|
| 61 |
+ |
|
| 62 |
+.scroller h2 {
|
|
| 63 |
+ margin: 6px 0 12px; |
|
| 64 |
+ height: 2.4em; |
|
| 65 |
+ line-height: 1.2em; |
|
| 66 |
+ overflow: hidden; |
|
| 67 |
+ font-size: 15px; |
|
| 68 |
+ font-weight: 400; |
|
| 69 |
+ color: #3e474e; |
|
| 70 |
+ display: -webkit-box; |
|
| 71 |
+ -webkit-box-orient: vertical; |
|
| 72 |
+ -webkit-line-clamp: 2; |
|
| 73 |
+} |
|
| 74 |
+ |
|
| 75 |
+.scroller .descr {
|
|
| 76 |
+ font-size: 13px; |
|
| 77 |
+ color: #868686; |
|
| 78 |
+} |
|
| 79 |
+ |
|
| 80 |
+.loading {
|
|
| 81 |
+ color: #999; |
|
| 82 |
+ padding: .9375rem 0; |
|
| 83 |
+ font-size: .625rem; |
|
| 84 |
+ /*background-color: #f0f0f0;*/ |
|
| 85 |
+} |
page/static/img/call_guide.png → page/static/page/img/call_guide.png
page/static/img/comment.png → page/static/page/img/comment.png
page/static/img/fruits/apple.png → page/static/page/img/fruits/apple.png
page/static/img/fruits/banana.png → page/static/page/img/fruits/banana.png
page/static/img/fruits/broccoli.png → page/static/page/img/fruits/broccoli.png
page/static/img/fruits/carambola.png → page/static/page/img/fruits/carambola.png
page/static/img/fruits/carrot.png → page/static/page/img/fruits/carrot.png
page/static/img/fruits/cherry.png → page/static/page/img/fruits/cherry.png
page/static/img/fruits/corn.png → page/static/page/img/fruits/corn.png
page/static/img/fruits/dragon.png → page/static/page/img/fruits/dragon.png
page/static/img/fruits/eggplant.png → page/static/page/img/fruits/eggplant.png
page/static/img/fruits/fig.png → page/static/page/img/fruits/fig.png
page/static/img/fruits/grape.png → page/static/page/img/fruits/grape.png
page/static/img/fruits/lemon.png → page/static/page/img/fruits/lemon.png
page/static/img/fruits/mangosteen.png → page/static/page/img/fruits/mangosteen.png
page/static/img/fruits/orange.png → page/static/page/img/fruits/orange.png
page/static/img/fruits/papaya.png → page/static/page/img/fruits/papaya.png
page/static/img/fruits/peach.png → page/static/page/img/fruits/peach.png
page/static/img/fruits/pineapple.png → page/static/page/img/fruits/pineapple.png
page/static/img/fruits/strawberry.png → page/static/page/img/fruits/strawberry.png
page/static/img/fruits/watermelon.png → page/static/page/img/fruits/watermelon.png
page/static/img/kivi.png → page/static/page/img/kivi.png
page/static/img/no_content_tip.png → page/static/page/img/no_content_tip.png
page/static/img/qrscan.png → page/static/page/img/qrscan.png
page/static/img/thumbup.png → page/static/page/img/thumbup.png
page/static/img/tomato.png → page/static/page/img/tomato.png
page/static/img/进入群.png → page/static/page/img/进入群.png
+ 45
- 0
page/static/page/js/scroll_loader.js
@@ -0,0 +1,45 @@ |
||
| 1 |
+/** |
|
| 2 |
+ * 滚动加载器 |
|
| 3 |
+ * 当滚动到页面底部的时候, 触发一个回调 |
|
| 4 |
+ * @param {function} callback
|
|
| 5 |
+ * @param {boolean} init_trigger - 刚开始是否先触发一次回调
|
|
| 6 |
+ */ |
|
| 7 |
+function scroll_loader(callback, init_trigger) {
|
|
| 8 |
+ var $window = $(window); |
|
| 9 |
+ var $document = $(document); |
|
| 10 |
+ var SCREEN_HEIGHT = document.documentElement.clientHeight; |
|
| 11 |
+ var DELTA_BUFFER_HEIGHT = 100; |
|
| 12 |
+ var previous_scroll_top = 0; |
|
| 13 |
+ |
|
| 14 |
+ var flag = true; |
|
| 15 |
+ |
|
| 16 |
+ // 先触发一次回调 |
|
| 17 |
+ if (init_trigger) callback(function () {
|
|
| 18 |
+ // Do Nothing |
|
| 19 |
+ }); |
|
| 20 |
+ |
|
| 21 |
+ $window.on('scroll', function () {
|
|
| 22 |
+ var document_height = $document.height(); |
|
| 23 |
+ var CURRENT_SCROLL_TOP = $window.scrollTop(); |
|
| 24 |
+ var IS_SCROLLING_UP = CURRENT_SCROLL_TOP > previous_scroll_top; |
|
| 25 |
+ var IS_REACH_BOTTOM = document_height - CURRENT_SCROLL_TOP < SCREEN_HEIGHT + DELTA_BUFFER_HEIGHT; |
|
| 26 |
+ |
|
| 27 |
+ previous_scroll_top = CURRENT_SCROLL_TOP; |
|
| 28 |
+ |
|
| 29 |
+ if (IS_SCROLLING_UP && IS_REACH_BOTTOM) {
|
|
| 30 |
+ if (flag) {
|
|
| 31 |
+ flag = false; |
|
| 32 |
+ } else {
|
|
| 33 |
+ return true; |
|
| 34 |
+ } |
|
| 35 |
+ function complete_callback() {
|
|
| 36 |
+ // 刷新页面的高度 |
|
| 37 |
+ document_height = $(document).height(); |
|
| 38 |
+ // 准备下一次触发回调 |
|
| 39 |
+ flag = true; |
|
| 40 |
+ } |
|
| 41 |
+ |
|
| 42 |
+ callback(complete_callback); |
|
| 43 |
+ } |
|
| 44 |
+ }); |
|
| 45 |
+}; |
+ 93
- 41
page/templates/page/mini_preview2.html
@@ -9,10 +9,15 @@ |
||
| 9 | 9 |
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> |
| 10 | 10 |
<title>拍爱</title> |
| 11 | 11 |
|
| 12 |
+ <link href="{% static 'page/css/scroll_loader.css' %}" rel="stylesheet">
|
|
| 12 | 13 |
<link href="//cdn.bootcss.com/photoswipe/4.1.2/photoswipe.css" rel="stylesheet"> |
| 13 | 14 |
<link href="//cdn.bootcss.com/photoswipe/4.1.2/default-skin/default-skin.css" rel="stylesheet"> |
| 14 | 15 |
|
| 15 | 16 |
<style> |
| 17 |
+ .text-center {
|
|
| 18 |
+ text-align: center; |
|
| 19 |
+ } |
|
| 20 |
+ |
|
| 16 | 21 |
.float-left {
|
| 17 | 22 |
float: left; |
| 18 | 23 |
} |
@@ -113,8 +118,8 @@ |
||
| 113 | 118 |
position: fixed; |
| 114 | 119 |
right: 10px; |
| 115 | 120 |
bottom: 10px; |
| 116 |
- width: 80px; |
|
| 117 |
- height: 80px; |
|
| 121 |
+ width: 60px; |
|
| 122 |
+ height: 60px; |
|
| 118 | 123 |
z-index: 99999; |
| 119 | 124 |
} |
| 120 | 125 |
|
@@ -137,7 +142,7 @@ |
||
| 137 | 142 |
</div> |
| 138 | 143 |
</div> |
| 139 | 144 |
<div id="mask-thump" class="mask-thump"> |
| 140 |
- <img class="" src="../../static/img/thumbup.png"/> |
|
| 145 |
+ <img class="" src="{% static 'page/img/thumbup.png' %}"/>
|
|
| 141 | 146 |
</div> |
| 142 | 147 |
<div id="buy" style="display:none"> |
| 143 | 148 |
<div id="nomark" class="nomark-buy">去除水印</div> |
@@ -145,8 +150,10 @@ |
||
| 145 | 150 |
</div> |
| 146 | 151 |
<!-- 扫一扫 --> |
| 147 | 152 |
<div id="qrscan" class="qrscan"> |
| 148 |
- <img class="" src="../../static/img/qrscan.png"/> |
|
| 153 |
+ <img class="" src="{% static 'page/img/qrscan.png' %}"/>
|
|
| 149 | 154 |
</div> |
| 155 |
+ |
|
| 156 |
+ <p id="loading" class="loading text-center clear-both">{% if left %}加载中...{% else %}--- 没有更多了 ---{% endif %}</p>
|
|
| 150 | 157 |
</div> |
| 151 | 158 |
<!-- Root element of PhotoSwipe. Must have class pswp. --> |
| 152 | 159 |
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> |
@@ -201,6 +208,7 @@ |
||
| 201 | 208 |
<script src="//cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script> |
| 202 | 209 |
<script src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> |
| 203 | 210 |
<script src="{% static 'pai2/js/jswe-0.0.4.js' %}"></script>
|
| 211 |
+<script src="{% static 'page/js/scroll_loader.js' %}"></script>
|
|
| 204 | 212 |
<script> |
| 205 | 213 |
$(function () {
|
| 206 | 214 |
/** 格式化输入字符串 **/ |
@@ -257,8 +265,8 @@ |
||
| 257 | 265 |
|
| 258 | 266 |
function parse(paramstr) {
|
| 259 | 267 |
var ret = {},
|
| 260 |
- seg = paramstr.split('&'),
|
|
| 261 |
- len = seg.length, i = 0, s; |
|
| 268 |
+ seg = paramstr.split('&'),
|
|
| 269 |
+ len = seg.length, i = 0, s; |
|
| 262 | 270 |
for (; i < len; i++) {
|
| 263 | 271 |
s = seg[i].split('=');
|
| 264 | 272 |
ret[s[0]] = s[1]; |
@@ -308,45 +316,49 @@ |
||
| 308 | 316 |
var user_id = '{{ user_id }}';
|
| 309 | 317 |
var nickname = '{{ nickname }}';
|
| 310 | 318 |
|
| 311 |
- for (var i = 0; i < session_photos.length; i++) {
|
|
| 312 |
- var photos = session_photos[i].photos; |
|
| 313 |
- for (var j = 0; j < photos.length; j++) {
|
|
| 314 |
- photoHeight = photos[j].photo_thumbnail_h / photos[j].photo_thumbnail_w * photoWidth; |
|
| 315 |
- var header = ( |
|
| 316 |
- '<div class="photo-top">' + |
|
| 317 |
- '<img class="group-avatar float-left" src="../../static/img/fruits/{0}.png" />' +
|
|
| 318 |
- '<text class="group-name float-left">{1}</text>' +
|
|
| 319 |
- '<text class="section-text float-right">{2}</text>' +
|
|
| 320 |
- '</div>' |
|
| 321 |
- ).format(GROUP_AVATAR_LIST[photos[j].group_default_avatar], photos[j].group_name, fromNow(photos[j].created_at)); |
|
| 322 |
- var imgctx = '<img src="{0}" data-idx="{1}" style="width:{2}px;height:{3}px">'.format(photos[j].photo_thumbnail_url, photoIdx, photoWidth, photoHeight);
|
|
| 323 |
- var footer = ( |
|
| 324 |
- '<div class="photo-bottom">' + |
|
| 325 |
- '<img class="section-icon float-left" src="../../static/img/thumbup.png" />' + |
|
| 326 |
- '<text class="thump-comment-num float-left">{0}</text>' +
|
|
| 327 |
- '<img class="section-icon float-left" src="../../static/img/comment.png" />' + |
|
| 328 |
- '<text class="thump-comment-num float-left">{1}</text>' +
|
|
| 329 |
- '</div>' |
|
| 330 |
- ).format(photos[j].thumbup_num, photos[j].comment_num); |
|
| 331 |
- if (leftHeight > rightHeight) {
|
|
| 332 |
- rightHeight += photoHeight + 72; |
|
| 333 |
- rightImgs += '<div class="imgctx">{0}{1}{2}</div>'.format(header, imgctx, footer);
|
|
| 334 |
- } else {
|
|
| 335 |
- leftHeight += photoHeight + 72; |
|
| 336 |
- leftImgs += '<div class="imgctx">{0}{1}{2}</div>'.format(header, imgctx, footer);
|
|
| 319 |
+ function session_photos_display(session_photos) {
|
|
| 320 |
+ for (var i = 0; i < session_photos.length; i++) {
|
|
| 321 |
+ var photos = session_photos[i].photos; |
|
| 322 |
+ for (var j = 0; j < photos.length; j++) {
|
|
| 323 |
+ photoHeight = photos[j].photo_thumbnail_h / photos[j].photo_thumbnail_w * photoWidth; |
|
| 324 |
+ var header = ( |
|
| 325 |
+ '<div class="photo-top">' + |
|
| 326 |
+ '<img class="group-avatar float-left" src="../../static/page/img/fruits/{0}.png" />' +
|
|
| 327 |
+ '<text class="group-name float-left">{1}</text>' +
|
|
| 328 |
+ '<text class="section-text float-right">{2}</text>' +
|
|
| 329 |
+ '</div>' |
|
| 330 |
+ ).format(GROUP_AVATAR_LIST[photos[j].group_default_avatar], photos[j].group_name, fromNow(photos[j].created_at)); |
|
| 331 |
+ var imgctx = '<img src="{0}" data-idx="{1}" style="width:{2}px;height:{3}px">'.format(photos[j].photo_thumbnail_url, photoIdx, photoWidth, photoHeight);
|
|
| 332 |
+ var footer = ( |
|
| 333 |
+ '<div class="photo-bottom">' + |
|
| 334 |
+ '<img class="section-icon float-left" src="../../static/page/img/thumbup.png" />' + |
|
| 335 |
+ '<text class="thump-comment-num float-left">{0}</text>' +
|
|
| 336 |
+ '<img class="section-icon float-left" src="../../static/page/img/comment.png" />' + |
|
| 337 |
+ '<text class="thump-comment-num float-left">{1}</text>' +
|
|
| 338 |
+ '</div>' |
|
| 339 |
+ ).format(photos[j].thumbup_num, photos[j].comment_num); |
|
| 340 |
+ if (leftHeight > rightHeight) {
|
|
| 341 |
+ rightHeight += photoHeight + 72; |
|
| 342 |
+ rightImgs += '<div class="imgctx">{0}{1}{2}</div>'.format(header, imgctx, footer);
|
|
| 343 |
+ } else {
|
|
| 344 |
+ leftHeight += photoHeight + 72; |
|
| 345 |
+ leftImgs += '<div class="imgctx">{0}{1}{2}</div>'.format(header, imgctx, footer);
|
|
| 346 |
+ } |
|
| 347 |
+ swipeItems.push({
|
|
| 348 |
+ src: photos[j]['porder'].m_photo_url || photos[j].photo_url, |
|
| 349 |
+ w: photos[j].photo_w, |
|
| 350 |
+ h: photos[j].photo_h, |
|
| 351 |
+ }) |
|
| 352 |
+ swipePhotos.push(photos[j]); |
|
| 353 |
+ photoIdx += 1; |
|
| 337 | 354 |
} |
| 338 |
- swipeItems.push({
|
|
| 339 |
- src: photos[j]['porder'].m_photo_url || photos[j].photo_url, |
|
| 340 |
- w: photos[j].photo_w, |
|
| 341 |
- h: photos[j].photo_h, |
|
| 342 |
- }) |
|
| 343 |
- swipePhotos.push(photos[j]); |
|
| 344 |
- photoIdx += 1; |
|
| 345 | 355 |
} |
| 356 |
+ |
|
| 357 |
+ $('#left').append(leftImgs);
|
|
| 358 |
+ $('#right').append(rightImgs);
|
|
| 346 | 359 |
} |
| 347 | 360 |
|
| 348 |
- $('#left').append(leftImgs);
|
|
| 349 |
- $('#right').append(rightImgs);
|
|
| 361 |
+ session_photos_display(session_photos); |
|
| 350 | 362 |
|
| 351 | 363 |
var pswpElement = document.querySelectorAll('.pswp')[0];
|
| 352 | 364 |
// define options (if needed) |
@@ -398,6 +410,7 @@ |
||
| 398 | 410 |
}); |
| 399 | 411 |
}) |
| 400 | 412 |
|
| 413 |
+ /** 去水印图片购买 **/ |
|
| 401 | 414 |
function order_query(orderId, photoId) {
|
| 402 | 415 |
$.ajax({
|
| 403 | 416 |
url: '/mini/order_query', |
@@ -481,6 +494,7 @@ |
||
| 481 | 494 |
}); |
| 482 | 495 |
}) |
| 483 | 496 |
|
| 497 |
+ /** 二维码扫描 **/ |
|
| 484 | 498 |
$('#qrscan').click(function (e) {
|
| 485 | 499 |
V.scanQRCode({
|
| 486 | 500 |
needResult: 1 |
@@ -549,6 +563,44 @@ |
||
| 549 | 563 |
}) |
| 550 | 564 |
} |
| 551 | 565 |
} |
| 566 |
+ |
|
| 567 |
+ /** 上拉加载 **/ |
|
| 568 |
+ var enable_loader = {{ left }};
|
|
| 569 |
+ var current_page = 1; |
|
| 570 |
+ var count_pre_load = 50; |
|
| 571 |
+ |
|
| 572 |
+ function scroll_func(page, count, callback) {
|
|
| 573 |
+ $.ajax({
|
|
| 574 |
+ url: '/pai2/home', |
|
| 575 |
+ type: 'POST', |
|
| 576 |
+ data: {
|
|
| 577 |
+ user_id: user_id, |
|
| 578 |
+ page: current_page, |
|
| 579 |
+ }, |
|
| 580 |
+ success: function (res) {
|
|
| 581 |
+ if (res.status === 200) {
|
|
| 582 |
+ if (res.data.left === 0) {
|
|
| 583 |
+ enable_loader = false; |
|
| 584 |
+ $('#loading').text('--- 没有更多了 ---');
|
|
| 585 |
+ } |
|
| 586 |
+ var session_photos = res.data.session_photos; |
|
| 587 |
+ if (session_photos) {
|
|
| 588 |
+ session_photos_display(session_photos); |
|
| 589 |
+ } |
|
| 590 |
+ } |
|
| 591 |
+ callback(); |
|
| 592 |
+ }, |
|
| 593 |
+ }) |
|
| 594 |
+ } |
|
| 595 |
+ |
|
| 596 |
+ function scroll_handler(callback) {
|
|
| 597 |
+ if (enable_loader) {
|
|
| 598 |
+ scroll_func(++current_page, count_pre_load, callback); |
|
| 599 |
+ } |
|
| 600 |
+ } |
|
| 601 |
+ |
|
| 602 |
+ // 开启滚动加载 |
|
| 603 |
+ scroll_loader(scroll_handler, false); |
|
| 552 | 604 |
}) |
| 553 | 605 |
</script> |
| 554 | 606 |
</body> |
+ 2
- 0
pai2/urls.py
@@ -77,6 +77,8 @@ urlpatterns += [ |
||
| 77 | 77 |
|
| 78 | 78 |
# Mini App |
| 79 | 79 |
urlpatterns += [ |
| 80 |
+ url(r'^pai2/home$', group_views.pai2_home_api, name='pai2_home_api'), # 首页照片信息 |
|
| 81 |
+ |
|
| 80 | 82 |
url(r'^mini/userinfo$', mini_views.get_userinfo_api, name='get_userinfo_api2'), # 获取用户信息 |
| 81 | 83 |
url(r'^mini/order_create$', pay_views.wx_order_create_api, name='wx_order_create_api'), # 订单创建 |
| 82 | 84 |
url(r'^mini/order_query$', pay_views.wx_order_query_api, name='wx_order_query_api'), # 订单查询补单 |