上拉加载插件dropload.js，封装成seajs插件
2018-03-01 00:00
731 查看
摘要: 上拉加载插件dropload.js，封装成seajs插件
该示例需要对js,jquery,seajs用法有基本了解，同时，该示例是用在laravel5.6框架中的，其他框架用法基本相同，只是文件路径可能有所变化，如有疑问，请在评论区留言，会尽力解答
站点文件路径（建议看的时候，可以先把这部分内容复制出来，然后再对比文件路径往下看）
.wap ├── app │ ├── Http │ │ │ ├── Jobs │ │ └── Job.php │ ├── Libs │ │ ├── Helper.php │ │ ├── Oauth2.php │ │ ├── RedisManager.php │ │ ├── Rest.php │ │ └── ReturnCode.php │ ├── Listeners │ ├── Policies │ ├── Providers │ │ ├── AppServiceProvider.php │ │ ├── AuthServiceProvider.php │ │ ├── EventServiceProvider.php │ │ └── RouteServiceProvider.php │ └── User.php ├── artisan ├── bootstrap │ ├── app.php │ ├── autoload.php │ └── cache │ └── services.php ├── composer.json ├── composer.lock ├── composer.phar ├── config ├── database ├── gulpfile.js ├── package.json ├── phpunit.xml ├── public │ ├── about.html │ ├── assets │ │ ├── css │ │ │ ├── wap2 │ │ ├── fonts │ │ │ │ │ ├── img │ │ │ │ │ ├── js │ │ │ ├── lib │ │ │ │ ├── dropload.js │ │ │ │ ├── dropload.min.js │ │ │ │ ├── exif.js │ │ │ │ ├── exif.min.js │ │ │ │ ├── global-72b2917f61.js │ │ │ │ ├── global.js │ │ │ │ ├── global.min.js │ │ │ │ ├── helpsell-d362f63460.js │ │ │ │ ├── helpsell.js │ │ │ │ ├── helpsell.min.js │ │ │ │ ├── imgbase64-f823578e4a.js │ │ │ │ ├── imgbase64.js │ │ │ │ ├── imgbase64.min.js │ │ │ │ ├── imglazyLoad2-c72b9ed19d.js │ │ │ │ ├── imglazyLoad2.js │ │ │ │ ├── iscroll.js │ │ │ │ ├── jquery.2.1.4.js │ │ │ │ ├── jquery.2.1.4.min.js │ │ │ │ ├── jquery.owl.carousel.js │ │ │ │ ├── marquee.js │ │ │ │ ├── mescroll.min.js │ │ │ │ ├── mescroll.minmore.js │ │ │ │ ├── mobileSelect2.min.js │ │ │ │ ├── mobileSelect.js │ │ │ │ ├── mobileSelect.min.js │ │ │ │ ├── myglobal-230f5c8a96.js │ │ │ │ ├── myglobal.js │ │ │ │ ├── navbarscroll.js │ │ │ │ ├── pay-cdab138b4a.js │ │ │ │ ├── pay.js │ │ │ │ ├── pay.min.js │ │ │ │ ├── pop2.js │ │ │ │ ├── pop-e5a9f25d9d.js │ │ │ │ ├── pop.js │ │ │ │ ├── pop.min.js │ │ │ │ ├── sea.config.js │ │ │ │ ├── sea.config.min.js │ │ │ │ ├── seajs-css.js │ │ │ │ ├── sea.min.js │ │ │ │ ├── sku.min.js │ │ │ │ ├── sku-wap.min.js │ │ │ │ ├── sm.js │ │ │ │ ├── sm.min.js │ │ │ │ ├── swiper.js │ │ │ │ ├── swiper.min.js │ │ │ │ ├── sysnotice-3557666d77.js │ │ │ │ ├── sysnotice.js │ │ │ │ ├── template.js │ │ │ │ ├── template.min.js │ │ │ │ ├── translate-4c0f2c03d0.js │ │ │ │ ├── translate.js │ │ │ │ ├── translate.min.js │ │ │ │ ├── weixin.js │ │ │ │ ├── weixin.min.js │ │ │ │ └── zepto.min.js │ │ │ ├── modules │ │ │ │ │ │ │ ├── wap2 │ │ │ │ ├── activity │ │ │ │ │ ├── a10-f3b9642fca.js │ │ │ │ │ ├── a10.js │ │ │ │ │ ├── a10.min.js │ │ │ │ │ ├── a11-0621620ea7.js │ │ │ │ │ ├── a11.js │ │ │ │ │ ├── a11.min.js │ │ │ │ │ ├── a12-e2d49b0b2e.js │ │ │ │ │ ├── a12.js │ │ │ │ │ ├── a12.min.js │ │ │ │ │ ├── a1-4146f0acea.js │ │ │ │ │ ├── a1.js │ │ │ │ │ ├── a1.min.js │ │ │ │ │ ├── a2-b0478a39ea.js │ │ │ │ │ ├── a2.js │ │ │ │ │ ├── a2.min.js │ │ │ │ │ ├── a3-1a442a13f3.js │ │ │ │ │ ├── a3.js │ │ │ │ │ ├── a3.min.js │ │ │ │ │ ├── a4-b4111d68b8.js │ │ │ │ │ ├── a4.js │ │ │ │ │ ├── a4.min.js │ │ │ │ │ ├── a5-6275acf081.js │ │ │ │ │ ├── a5.js │ │ │ │ │ ├── a5.min.js │ │ │ │ │ ├── a6-a3eaa4f0f2.js │ │ │ │ │ ├── a6.js │ │ │ │ │ ├── a6.min.js │ │ │ │ │ ├── a7-5ca341659f.js │ │ │ │ │ ├── a7.js │ │ │ │ │ ├── a7.min.js │ │ │ │ │ ├── a8-a0f3587be8.js │ │ │ │ │ ├── a8.js │ │ │ │ │ ├── a8.min.js │ │ │ │ │ ├── a9-5eca7504de.js │ │ │ │ │ ├── a9.js │ │ │ │ │ └── a9.min.js │ │ │ │ ├── address │ │ │ │ │ ├── add-bca9be0413.js │ │ │ │ │ ├── add.js │ │ │ │ │ ├── add.min.js │ │ │ │ │ ├── address_add.js │ │ │ │ │ ├── address_build.js │ │ │ │ │ ├── address_city.js │ │ │ │ │ ├── address_edit.js │ │ │ │ │ ├── address_list.js │ │ │ │ │ ├── certify-7f241e75ec.js │ │ │ │ │ ├── certify.js │ │ │ │ │ ├── certify.min.js │ │ │ │ │ ├── edit-371eaea1da.js │ │ │ │ │ ├── edit.js │ │ │ │ │ ├── edit.min.js │ │ │ │ │ ├── list-a386e2d87b.js │ │ │ │ │ ├── list.js │ │ │ │ │ └── list.min.js │ │ │ │ ├── adviceManager │ │ │ │ │ └── adviceManager.js │ │ │ │ ├── bank │ │ │ │ │ ├── add-a5d5e1480b.js │ │ │ │ │ ├── add.js │ │ │ │ │ ├── add.min.js │ │ │ │ │ ├── edit-ff29035f27.js │ │ │ │ │ ├── edit.js │ │ │ │ │ ├── edit.min.js │ │ │ │ │ ├── list-ebc8d4f6fd.js │ │ │ │ │ ├── list.js │ │ │ │ │ └── list.min.js │ │ │ │ ├── common-e435a9b861.js │ │ │ │ ├── common.js │ │ │ │ ├── common.min.js │ │ │ │ ├── coupon │ │ │ │ │ ├── index-0f089da70f.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── use_coupon-766e5453e1.js │ │ │ │ │ └── use_coupon.js │ │ │ │ ├── goods │ │ │ │ │ ├── brand-9ed389d8fb.js │ │ │ │ │ ├── brand.js │ │ │ │ │ ├── brand.min.js │ │ │ │ │ ├── cate-310ac85ed4.js │ │ │ │ │ ├── cate.js │ │ │ │ │ ├── cate.min.js │ │ │ │ │ ├── detail-caeb32bed9.js │ │ │ │ │ ├── detail.js │ │ │ │ │ ├── detail.min.js │ │ │ │ │ ├── detail-wap.js │ │ │ │ │ ├── list-06171e3d51.js │ │ │ │ │ ├── list.js │ │ │ │ │ ├── list.min.js │ │ │ │ │ ├── myBrand-68a30db3a6.js │ │ │ │ │ ├── myBrand.js │ │ │ │ │ ├── newBrand-e64977a780.js │ │ │ │ │ ├── newBrand.js │ │ │ │ │ ├── search-365cf29de2.js │ │ │ │ │ ├── search.js │ │ │ │ │ └── search.min.js │ │ │ │ ├── help │ │ │ │ │ ├── code-e5c2b24cce.js │ │ │ │ │ ├── code.js │ │ │ │ │ └── code.min.js │ │ │ │ ├── home │ │ │ │ │ ├── index-636afaaef7.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.min.js │ │ │ │ ├── index │ │ │ │ │ ├── adviceManager.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── index_select_community.js │ │ │ │ │ ├── recommend_list.js │ │ │ │ │ ├── rush_list.js │ │ │ │ │ ├── show_life_list.js │ │ │ │ │ └── show_news_list.js │ │ │ │ ├── indexrush │ │ │ │ │ ├── handlebars-933127c119.js │ │ │ │ │ ├── handlebars.js │ │ │ │ │ ├── imglazyLoad2-24c8033a43.js │ │ │ │ │ ├── imglazyLoad2.js │ │ │ │ │ ├── index-7966cedd15.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── index_static-34577637be.js │ │ │ │ │ ├── index_static.js │ │ │ │ │ ├── jquery-1.11.2.min.js │ │ │ │ │ ├── jquery-1-d3ed97676b.11.2.min.js │ │ │ │ │ ├── swiper-33eb826253.min.js │ │ │ │ │ ├── swiper.min.js │ │ │ │ │ ├── touch-a8f4147e78.js │ │ │ │ │ └── touch.js │ │ │ │ ├── leader │ │ │ │ │ ├── apply-5e62c45c83.js │ │ │ │ │ ├── apply.js │ │ │ │ │ ├── apply.min.js │ │ │ │ │ ├── member-8848ad2e35.js │ │ │ │ │ ├── member.js │ │ │ │ │ ├── member.min.js │ │ │ │ │ ├── phone-06acfd7c4a.js │ │ │ │ │ ├── phone.js │ │ │ │ │ ├── phone.min.js │ │ │ │ │ ├── sale-f38b280b32.js │ │ │ │ │ └── sale.min.js │ │ │ │ ├── login │ │ │ │ │ ├── forget_password.js │ │ │ │ │ ├── login.js │ │ │ │ │ └── vlogin.js │ │ │ │ ├── meowChannel │ │ │ │ │ ├── index.js │ │ │ │ │ └── layer.js │ │ │ │ ├── msg │ │ │ │ │ ├── detail-99b39cad14.js │ │ │ │ │ ├── detail.js │ │ │ │ │ ├── detail.min.js │ │ │ │ │ ├── list-de83241017.js │ │ │ │ │ ├── list.js │ │ │ │ │ └── list.min.js │ │ │ │ ├── newindex │ │ │ │ │ ├── index.js │ │ │ │ │ ├── moreCateList.js │ │ │ │ │ ├── shopCategoryList.js │ │ │ │ │ └── volumeList.js │ │ │ │ ├── news │ │ │ │ │ ├── benefit_detail.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── shipping_list.js │ │ │ │ ├── order │ │ │ │ │ ├── billing.js │ │ │ │ │ ├── billing_list.js │ │ │ │ │ ├── billing_log.js │ │ │ │ │ ├── cart-c7dc7364be.js │ │ │ │ │ ├── cart.js │ │ │ │ │ ├── cart.min.js │ │ │ │ │ ├── confirm-9177c86b1f.js │ │ │ │ │ ├── confirm.js │ │ │ │ │ ├── confirm.min.js │ │ │ │ │ ├── detail-df065ffed5.js │ │ │ │ │ ├── detail.js │ │ │ │ │ ├── detail.min.js │ │ │ │ │ ├── express-6c5d0541fa.js │ │ │ │ │ ├── express.js │ │ │ │ │ ├── express.min.js │ │ │ │ │ ├── list-140c9f680b.js │ │ │ │ │ ├── list.js │ │ │ │ │ ├── list.min.js │ │ │ │ │ ├── order_apply_service.js │ │ │ │ │ ├── order_detail.js │ │ │ │ │ ├── order_list2.js │ │ │ │ │ ├── order_list.js │ │ │ │ │ ├── order_service.js │ │ │ │ │ └── shipping_list.js │ │ │ │ ├── PreOrder │ │ │ │ │ └── index.js │ │ │ │ ├── profit │ │ │ │ │ ├── cash-227c4fd8ff.js │ │ │ │ │ ├── cash-fail-bd65d66138.js │ │ │ │ │ ├── cash-fail.js │ │ │ │ │ ├── cash-fail.min.js │ │ │ │ │ ├── cash.js │ │ │ │ │ ├── cash.min.js │ │ │ │ │ ├── cash-success-a0be2409b8.js │ │ │ │ │ ├── cash-success.js │ │ │ │ │ ├── cash-success.min.js │ │ │ │ │ ├── detail-16d0288b56.js │ │ │ │ │ ├── detail.js │ │ │ │ │ ├── detail.min.js │ │ │ │ │ ├── info-5103b1af93.js │ │ │ │ │ ├── info.js │ │ │ │ │ ├── info.min.js │ │ │ │ │ ├── list-cb5953d3d0.js │ │ │ │ │ ├── list.js │ │ │ │ │ ├── list.min.js │ │ │ │ │ ├── spread-dd1312e2a3.js │ │ │ │ │ └── spread.min.js │ │ │ │ ├── property │ │ │ │ │ ├── property_repair_evaluate.js │ │ │ │ │ └── repair_submit.js │ │ │ │ ├── property_repair │ │ │ │ │ └── list.js │ │ │ │ ├── qrcode │ │ │ │ │ ├── shop-2637683116.js │ │ │ │ │ ├── shop.js │ │ │ │ │ └── shop.min.js │ │ │ │ ├── register │ │ │ │ │ ├── registercertify.js │ │ │ │ │ ├── register.js │ │ │ │ │ ├── registertype.js │ │ │ │ │ ├── selectcommunity.js │ │ │ │ │ └── selectcommunitymobile.js │ │ │ │ ├── sale │ │ │ │ │ └── saleList.js │ │ │ │ ├── seckill │ │ │ │ │ ├── index-14c65c4c82.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── seckill_detail-ab78feccc7.js │ │ │ │ │ └── seckill_detail.js │ │ │ │ ├── secondsKill │ │ │ │ │ ├── index.js │ │ │ │ │ └── TouchSlide.1.1.source.js │ │ │ │ ├── seller │ │ │ │ │ ├── leader-d288b18686.js │ │ │ │ │ ├── leader.js │ │ │ │ │ ├── leader.min.js │ │ │ │ │ ├── list-c8cc9757cf.js │ │ │ │ │ ├── list.js │ │ │ │ │ └── list.min.js │ │ │ │ ├── set │ │ │ │ │ ├── list-1b9b316ceb.js │ │ │ │ │ ├── list.js │ │ │ │ │ └── list.min.js │ │ │ │ ├── shopCategory │ │ │ │ │ ├── index-ea61c2648d.js │ │ │ │ │ └── index.js │ │ │ │ ├── shopIndex │ │ │ │ │ ├── index-c850d4c28b.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── list-661088e635.js │ │ │ │ │ ├── list.js │ │ │ │ │ ├── list.min.js │ │ │ │ │ ├── recommendList-0a6304009c.js │ │ │ │ │ ├── recommendList.js │ │ │ │ │ ├── shopCategory-212d345760.js │ │ │ │ │ ├── shopCategory.js │ │ │ │ │ └── shopIndex_list-41b0cbe25e.js │ │ │ │ ├── spellGroup │ │ │ │ │ ├── detail.js │ │ │ │ │ ├── draw_order_details.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── spelling_detail.js │ │ │ │ │ └── spell_order_details.js │ │ │ │ ├── subject │ │ │ │ │ ├── index-4439b25fc3.js │ │ │ │ │ └── index.js │ │ │ │ ├── team │ │ │ │ │ ├── goodsdetail-da8b8eb469.js │ │ │ │ │ ├── goodsdetail.js │ │ │ │ │ ├── goodsdetail.min.js │ │ │ │ │ ├── goodslist-d70d90fe29.js │ │ │ │ │ ├── goodslist.js │ │ │ │ │ ├── goodslist.min.js │ │ │ │ │ ├── payed-ac5d44f073.js │ │ │ │ │ ├── payed.js │ │ │ │ │ ├── payed.min.js │ │ │ │ │ ├── share-ee434089e0.js │ │ │ │ │ ├── share.js │ │ │ │ │ ├── share.min.js │ │ │ │ │ ├── teamdetail-f1415cf883.js │ │ │ │ │ ├── teamdetail.js │ │ │ │ │ ├── teamdetail.min.js │ │ │ │ │ ├── teamlist-c490ff2cd6.js │ │ │ │ │ ├── teamlist.js │ │ │ │ │ └── teamlist.min.js │ │ │ │ ├── testmy │ │ │ │ │ └── index.js │ │ │ │ ├── user │ │ │ │ │ ├── about.js │ │ │ │ │ ├── center-be0ea9a88f.js │ │ │ │ │ ├── center.js │ │ │ │ │ ├── center.min.js │ │ │ │ │ ├── certify-1c4ad4d379.js │ │ │ │ │ ├── certify.js │ │ │ │ │ ├── certify.min.js │ │ │ │ │ ├── change_password.js │ │ │ │ │ ├── collect-4.js │ │ │ │ │ ├── collect-ef66a98dd5.js │ │ │ │ │ ├── collect.js │ │ │ │ │ ├── collect.min.js │ │ │ │ │ ├── coupon.js │ │ │ │ │ ├── feedback.js │ │ │ │ │ ├── integral.js │ │ │ │ │ ├── invite_code.js │ │ │ │ │ ├── order_coupon.js │ │ │ │ │ ├── setting.js │ │ │ │ │ ├── user_img.js │ │ │ │ │ ├── user_info.js │ │ │ │ │ ├── user_name.js │ │ │ │ │ └── wallet.js │ │ │ │ └── withdraw │ │ │ │ ├── apply-fd7fb08a21.js │ │ │ │ ├── apply.js │ │ │ │ ├── apply.min.js │ │ │ │ ├── fail-165bdf2d41.js │ │ │ │ ├── fail.js │ │ │ │ ├── fail.min.js │ │ │ │ ├── LArea-468875ed91.js │ │ │ │ ├── LArea.js │ │ │ │ ├── phone-e4156fc77d.js │ │ │ │ ├── phone.js │ │ │ │ ├── phone.min.js │ │ │ │ ├── success-8b5037e5b7.js │ │ │ │ ├── success.js │ │ │ │ └── success.min.js │ │ │ │ │ └── less │ │ │ ├── bank.html │ ├── bg.jpg │ ├── code0.png │ ├── code1.png │ ├── coupon.png │ ├── cs.php │ ├── favicon.ico │ ├── help0.jpg │ ├── help1.jpg │ ├── icon-nocoupon.png │ ├── index.php │ ├── info.php │ ├── logo.png │ ├── MP_verify_9e2H8EyymHnANZOQ.txt │ ├── MP_verify_ZrkVNOTjourEX7oY.txt │ ├── oauth.php │ ├── pay.html │ ├── pc.html │ ├── php_errors.log │ ├── register.html │ ├── robots.txt ├── README.md ├── resources │ ├── assets │ ├── lang │ └── views │ ├── errors │ │ └── 503.blade.php │ ├── wap │ │ ├── activity │ │ │ ├── a10.blade.php │ │ │ ├── a1.blade.php │ │ │ ├── a2.blade.php │ │ │ ├── a3.blade.php │ │ │ ├── a4.blade.php │ │ │ ├── a5.blade.php │ │ │ ├── a6.blade.php │ │ │ ├── a7.blade.php │ │ │ ├── a8.blade.php │ │ │ ├── a9.blade.php │ │ │ └── recommend.blade.php │ │ ├── address │ │ │ ├── add.blade.php │ │ │ ├── certify.blade.php │ │ │ ├── edit.blade.php │ │ │ └── list.blade.php │ │ ├── error │ │ │ ├── 401.blade.php │ │ │ ├── 404.blade.php │ │ │ └── 503.blade.php │ │ ├── goods │ │ │ ├── cate.blade.php │ │ │ └── detail.blade.php │ │ ├── help │ │ │ └── code.blade.php │ │ ├── home │ │ │ └── index.blade.php │ │ ├── index │ │ │ ├── index.blade.php │ │ │ ├── showNewsDetail.blade.php │ │ │ └── showNewsList.blade.php │ │ ├── layouts │ │ │ ├── masterapp.blade.php │ │ │ └── master.blade.php │ │ ├── order │ │ │ ├── cart.blade.php │ │ │ ├── confirm.blade.php │ │ │ ├── detail.blade.php │ │ │ ├── express.blade.php │ │ │ └── list.blade.php │ │ ├── seller │ │ │ ├── leader.blade.php │ │ │ └── list.blade.php │ │ ├── team │ │ │ ├── goodsdetail.blade.php │ │ │ ├── goodslist.blade.php │ │ │ ├── payed.blade.php │ │ │ ├── rule.blade.php │ │ │ ├── share.blade.php │ │ │ ├── teamdetail.blade.php │ │ │ └── teamlist.blade.php │ │ └── user │ │ ├── center.blade.php │ │ └── collect.blade.php │ ├── wap2 │ │ ├── about │ │ │ └── subscribe.blade.php │ │ ├── aboutus │ │ │ └── aboutus.blade.php │ │ ├── activity │ │ │ ├── a10.blade.php │ │ │ ├── a1.blade.php │ │ │ ├── a2.blade.php │ │ │ ├── a3.blade.php │ │ │ ├── a4.blade.php │ │ │ ├── a5.blade.php │ │ │ ├── a6.blade.php │ │ │ ├── a7.blade.php │ │ │ ├── a8.blade.php │ │ │ ├── a9.blade.php │ │ │ └── recommend.blade.php │ │ ├── address │ │ │ ├── add.blade.php │ │ │ ├── address_add.blade.php │ │ │ ├── address_build.blade.php │ │ │ ├── address_city.blade.php │ │ │ ├── address_edit.blade.php │ │ │ ├── address_list.blade.php │ │ │ ├── certify.blade.php │ │ │ ├── edit.blade.php │ │ │ └── list.blade.php │ │ ├── adviceManager │ │ │ └── adviceManagerDetail.blade.php │ │ ├── bank │ │ │ ├── add.blade.php │ │ │ ├── edit.blade.php │ │ │ └── list.blade.php │ │ ├── coupon │ │ │ ├── index.blade.php │ │ │ └── use_coupon.blade.php │ │ ├── error │ │ │ ├── 401.blade.php │ │ │ ├── 404.blade.php │ │ │ └── 503.blade.php │ │ ├── goods │ │ │ ├── brand.blade.php │ │ │ ├── cate.blade.php │ │ │ ├── detail.blade.php │ │ │ ├── list.blade.php │ │ │ ├── myBrand.blade.php │ │ │ ├── search.blade.php │ │ │ └── wxGoodsDetail.blade.php │ │ ├── home │ │ │ └── index.blade.php │ │ ├── index │ │ │ ├── article_goods_list.blade.php │ │ │ ├── home_index.blade.php │ │ │ ├── index.blade.php │ │ │ ├── indexSelectCommunity.blade.php │ │ │ ├── recommendList.blade.php │ │ │ ├── rushList.blade.php │ │ │ ├── showLifeDetail.blade.php │ │ │ ├── showLifeList.blade.php │ │ │ ├── showNewsDetail.blade.php │ │ │ └── showNewsList.blade.php │ │ ├── leader │ │ │ ├── apply.blade.php │ │ │ ├── member.blade.php │ │ │ ├── phone.blade.php │ │ │ └── sale.blade.php │ │ ├── login │ │ │ ├── forgetPassword.blade.php │ │ │ ├── login.blade.php │ │ │ └── vlogin.blade.php │ │ ├── meowChannel │ │ │ ├── luckyDraw.blade.php │ │ │ └── meowChannel.blade.php │ │ ├── msg │ │ │ ├── detail.blade.php │ │ │ └── list.blade.php │ │ ├── newIndex │ │ │ ├── moreGoods.blade.php │ │ │ ├── newIndex.blade.php │ │ │ ├── shopcategoryList.blade.php │ │ │ └── volumeList.blade.php │ │ ├── news │ │ │ ├── benefit_detail.blade.php │ │ │ ├── index.blade.php │ │ │ └── shipping_list.blade.php │ │ ├── order │ │ │ ├── billing.blade.php │ │ │ ├── billing_list.blade.php │ │ │ ├── billing_log.blade.php │ │ │ ├── cart.blade.php │ │ │ ├── confirm.blade.php │ │ │ ├── detail.blade.php │ │ │ ├── express.blade.php │ │ │ ├── list.blade.php │ │ │ ├── order_apply_service.blade.php │ │ │ ├── order_detail.blade.php │ │ │ ├── order_list.blade.php │ │ │ ├── order_service.blade.php │ │ │ └── shipping_list.blade.php │ │ ├── preOrder │ │ │ └── preOrder.blade.php │ │ ├── profit │ │ │ ├── cash.blade.php │ │ │ ├── cash-fail.blade.php │ │ │ ├── cash-success.blade.php │ │ │ ├── detail.blade.php │ │ │ ├── info.blade.php │ │ │ ├── list.blade.php │ │ │ └── spread.blade.php │ │ ├── property │ │ │ ├── index.blade.php │ │ │ ├── property_parking_add.blade.php │ │ │ ├── property_parking.blade.php │ │ │ ├── property_parking_number.blade.php │ │ │ ├── property_parking_pay2.blade.php │ │ │ ├── property_parking_pay.blade.php │ │ │ ├── property_parking_recharge2.blade.php │ │ │ ├── property_parking_recharge.blade.php │ │ │ ├── property_pay_address.blade.php │ │ │ ├── property_pay.blade.php │ │ │ ├── property_pay_page.blade.php │ │ │ ├── property_pay_record.blade.php │ │ │ ├── property_repair.blade.php │ │ │ ├── property_repair_evaluate.blade.php │ │ │ └── property_repair_submit.blade.php │ │ ├── qrcode │ │ │ └── shop.blade.php │ │ ├── register │ │ │ ├── register.blade.php │ │ │ ├── registeredCertification.blade.php │ │ │ ├── registerType.blade.php │ │ │ ├── selectCommunity.blade.php │ │ │ └── vlogin.blade.php │ │ ├── sale │ │ │ ├── saleDetail.blade.php │ │ │ └── saleList.blade.php │ │ ├── secondsKill │ │ │ ├── killDetail.blade.php │ │ │ └── secondsKill.blade.php │ │ ├── set │ │ │ └── list.blade.php │ │ ├── shopCategory │ │ │ └── index.blade.php │ │ ├── shopIndex │ │ │ ├── list.blade.php │ │ │ ├── recommendList.blade.php │ │ │ ├── shopCategory.blade.php │ │ │ └── shopIndex.blade.php │ │ ├── spellGroup │ │ │ ├── disassembly.blade.php │ │ │ ├── drawOrderDetails.blade.php │ │ │ ├── failureDetail.blade.php │ │ │ ├── paymentResult.blade.php │ │ │ ├── spellDetail.blade.php │ │ │ ├── spellGroup.blade.php │ │ │ ├── spellingDetail.blade.php │ │ │ ├── spellOrderDetails.blade.php │ │ │ ├── spellRules.blade.php │ │ │ └── successDetail.blade.php │ │ ├── subject │ │ │ └── index.blade.php │ │ ├── team │ │ │ ├── goodsdetail.blade.php │ │ │ ├── goodslist.blade.php │ │ │ ├── payed.blade.php │ │ │ ├── rule.blade.php │ │ │ ├── share.blade.php │ │ │ ├── teamdetail.blade.php │ │ │ └── teamlist.blade.php │ │ ├── test │ │ │ └── autofocus.blade.php │ │ ├── testmy │ │ │ └── index.blade.php │ │ ├── user │ │ │ ├── about.blade.php │ │ │ ├── center.blade.php │ │ │ ├── certify.blade.php │ │ │ ├── change_password.blade.php │ │ │ ├── collect.blade.php │ │ │ ├── coupon.blade.php │ │ │ ├── feedback.blade.php │ │ │ ├── help.blade.php │ │ │ ├── integral.blade.php │ │ │ ├── inviteCode.blade.php │ │ │ ├── myCollection.blade.php │ │ │ ├── newcenter.blade.php │ │ │ ├── order_coupon.blade.php │ │ │ ├── setting.blade.php │ │ │ ├── user_img.blade.php │ │ │ ├── user_info.blade.php │ │ │ ├── user_name.blade.php │ │ │ └── wallet.blade.php │ │ └── withdraw │ │ ├── apply.blade.php │ │ ├── fail.blade.php │ │ ├── phone.blade.php │ │ └── success.blade.php │ └── welcome.blade.php ├── server.php ├── storage │ ├── tests │ └── vendor
使用seajs封装dropload.js，上拉刷新插件
文件路径：wap\public\assets\js\lib\dropload.js
define(function(require,exports,module){
var $ = require('jquery');
module.exports = {
Init : function(){
this.start($);
},
start :function ($){
'use strict';
var win = window;
var doc = document;
var $win = $(win);
var $doc = $(doc);
$.fn.dropload = function(options){
return new MyDropLoad(this, options);
};
var MyDropLoad = function(element, options){
var me = this;
me.$element = element;
// 上方是否插入DOM
me.upInsertDOM = false;
// loading状态
me.loading = false;
// 是否锁定
me.isLockUp = false;
me.isLockDown = false;
// 是否有数据
me.isData = true;
me._scrollTop = 0;
me._threshold = 0;
me.init(options);
};
// 初始化
MyDropLoad.prototype.init = function(options){
var me = this;
me.opts = $.extend(true, {}, {
scrollArea : me.$element, // 滑动区域
domUp : { // 上方DOM
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
domDown : { // 下方DOM
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
},
autoLoad : true, // 自动加载
distance : 50, // 拉动距离
threshold : '', // 提前加载距离
loadUpFn : '', // 上方function
loadDownFn : '', // 下方function
domLoadFlag:true ////首次加载是否显示加载标识默认显示
}, options);
// 如果加载下方，事先在下方插入DOM
if(me.opts.loadDownFn != ''){
me.$element.append('<div class="'+me.opts.domDown.domClass+'">'+me.opts.domDown.domRefresh+'</div>');
me.$domDown = $('.'+me.opts.domDown.domClass);
}
// 计算提前加载距离
if(!!me.$domDown && me.opts.threshold === ''){
// 默认滑到加载区2/3处时加载
me._threshold = Math.floor(me.$domDown.height()*1/3);
}else{
me._threshold = me.opts.threshold;
}
// 判断滚动区域
if(me.opts.scrollArea == win){
me.$scrollArea = $win;
// 获取文档高度
me._scrollContentHeight = $doc.height();
// 获取win显示区高度 —— 这里有坑
me._scrollWindowHeight = doc.documentElement.clientHeight;
}else{
me.$scrollArea = me.opts.scrollArea;
me._scrollContentHeight = me.$element[0].scrollHeight;
me._scrollWindowHeight = me.$element.height();
}
fnAutoLoad(me);
// 窗口调整
$win.on('resize',function(){
if(me.opts.scrollArea == win){
// 重新获取win显示区高度
me._scrollWindowHeight = win.innerHeight;
}else{
me._scrollWindowHeight = me.$element.height();
}
});
// 绑定触摸
me.$element.on('touchstart',function(e){
if(!me.loading){
fnTouches(e);
fnTouchstart(e, me);
}
});
me.$element.on('touchmove',function(e){
if(!me.loading){
fnTouches(e, me);
fnTouchmove(e, me);
}
});
me.$element.on('touchend',function(){
if(!me.loading){
fnTouchend(me);
}
});
// 加载下方
me.$scrollArea.on('scroll',function(){
me._scrollTop = me.$scrollArea.scrollTop();
// 滚动页面触发加载数据
if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
loadDown(me);
}
});
};
// touches
function fnTouches(e){
if(!e.touches){
e.touches = e.originalEvent.touches;
}
}
// touchstart
function fnTouchstart(e, me){
me._startY = e.touches[0].pageY;
// 记住触摸时的scrolltop值
me.touchScrollTop = me.$scrollArea.scrollTop();
}
// touchmove
function fnTouchmove(e, me){
me._curY = e.touches[0].pageY;
me._moveY = me._curY - me._startY;
if(me._moveY > 0){
me.direction = 'down';
}else if(me._moveY < 0){
me.direction = 'up';
}
var _absMoveY = Math.abs(me._moveY);
// 加载上方
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
e.preventDefault();
me.$domUp = $('.'+me.opts.domUp.domClass);
// 如果加载区没有DOM
if(!me.upInsertDOM){
me.$element.prepend('<div class="'+me.opts.domUp.domClass+'"></div>');
me.upInsertDOM = true;
}
fnTransition(me.$domUp,0);
// 下拉
if(_absMoveY <= me.opts.distance){
me._offsetY = _absMoveY;
// todo：move时会不断清空、增加dom，有可能影响性能，下同
me.$domUp.html(me.opts.domUp.domRefresh);
// 指定距离 < 下拉距离 < 指定距离*2
}else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
me.$domUp.html(me.opts.domUp.domUpdate);
// 下拉距离 > 指定距离*2
}else{
me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
}
me.$domUp.css({'height': me._offsetY});
}
}
// touchend
function fnTouchend(me){
var _absMoveY = Math.abs(me._moveY);
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
fnTransition(me.$domUp,300);
if(_absMoveY > me.opts.distance){
me.$domUp.css({'height':me.$domUp.children().height()});
me.$domUp.html(me.opts.domUp.domLoad);
me.loading = true;
me.opts.loadUpFn(me);
}else{
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
me.upInsertDOM = false;
$(this).remove();
});
}
me._moveY = 0;
}
}
// 如果文档高度不大于窗口高度，数据较少，自动加载下方数据
function fnAutoLoad(me){
if(me.opts.autoLoad){
if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
loadDown(me);
}
}
}
// 重新获取文档高度
function fnRecoverContentHeight(me){
if(me.opts.scrollArea == win){
me._scrollContentHeight = $doc.height();
}else{
me._scrollContentHeight = me.$element[0].scrollHeight;
}
}
// 加载下方
function loadDown(me){
me.direction = 'up';
if(me.opts.domLoadFlag){
me.$domDown.html(me.opts.domDown.domLoad);
}else {
me.opts.domLoadFlag=true;
}
me.loading = true;
me.opts.loadDownFn(me);
}
// 锁定
MyDropLoad.prototype.lock = function(direction){
var me = this;
// 如果不指定方向
if(direction === undefined){
// 如果操作方向向上
if(me.direction == 'up'){
me.isLockDown = true;
// 如果操作方向向下
}else if(me.direction == 'down'){
me.isLockUp = true;
}else{
me.isLockUp = true;
me.isLockDown = true;
}
// 如果指定锁上方
}else if(direction == 'up'){
me.isLockUp = true;
// 如果指定锁下方
}else if(direction == 'down'){
me.isLockDown = true;
// 为了解决DEMO5中tab效果bug，因为滑动到下面，再滑上去点tab，direction=down，所以有bug
me.direction = 'up';
}
};
// 解锁
MyDropLoad.prototype.unlock = function(){
var me = this;
// 简单粗暴解锁
me.isLockUp = false;
me.isLockDown = false;
// 为了解决DEMO5中tab效果bug，因为滑动到下面，再滑上去点tab，direction=down，所以有bug
me.direction = 'up';
};
// 无数据
MyDropLoad.prototype.noData = function(flag){
var me = this;
if(flag === undefined || flag == true){
me.isData = false;
}else if(flag == false){
me.isData = true;
}
};
// 重置
MyDropLoad.prototype.resetload = function(){
var me = this;
if(me.direction == 'down' && me.upInsertDOM){
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
me.loading = false;
me.upInsertDOM = false;
$(this).remove();
fnRecoverContentHeight(me);
});
}else if(me.direction == 'up'){
me.loading = false;
// 如果有数据
if(me.isData){
// 加载区修改样式
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
fnAutoLoad(me);
}else{
// 如果没数据
me.$domDown.html(me.opts.domDown.domNoData);
}
}
};
// css过渡
function fnTransition(dom,num){
dom.css({
'-webkit-transition':'all '+num+'ms',
'transition':'all '+num+'ms'
});
}
}
}
})seaj.config配置dropload插件
文件路径：wap\public\assets\js\lib\sea.config.js
!function () {
seajs.config({
paths: {front: _global.url.front + "/assets"},
alias: {
jquery: "front/js/lib/jquery.2.1.4.min.js",
droploadsea: "front/js/lib/dropload.js"
},
//map: [[".js", ".js?t\x3d" + parseInt((new Date).getTime())]]//测试
map: [[".js", ".js?v\x3d" +"9"]]//线下
})
}();首页index.js引入上拉刷新插件
文件路径：wap\public\assets\js\wap2\newindex\index.js
/*
author : zero,
desc : 首页
*/
seajs.use([
'jquery',
'droploadsea'
], function ($,dropload) {
function Start() {
//初始化上拉加载插件,这个很重要，否则$对象将不会有dropload函数，最终导致插件无法执行
dropload.Init();
this.Init();
}
Start.prototype = {
Init: function () {
var _this = this;
_this.Render();
},
Render: function () {
var _this = this;
//上拉刷新
_this.updateList();
},
updateList: function () {
var _this = this;
var page = 1, size = 10;
var dropload = $('.page-group').dropload({
scrollArea: window,
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh" style="display: none;">上拉加载更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData: '<div class="dropload-noData">===我是有底线的===</div>'
},
threshold: 100,
domLoadFlag: false,//首次加载是否显示加载标识
loadDownFn: function (me) {
//setTimeout(function () {
_.ajaxApi('api/shop_goods_recommend', 'get', {page: page, size: size}, function (res) {
if (res.code == 0) {
var data = res.data;
if (data.length > 0) {
$("#goods_recommend").show();
var html = template('tpl-recommend', {recommend: data});
$('.goods_recommend_list').append(html);
_this.Event();
page++;
// 即使加载出错，也得重置
me.resetload();
} else {
if (page == 1) {
$("#goods_recommend").hide();
}
me.lock();
me.noData();
me.resetload();
return true;
}
} else {
$("#goods_recommend").hide();
me.lock();
me.noData();
me.resetload();
}
}, true, false);
//}, 500);
}
});
}
}
new Start();
})该示例需要对js,jquery,seajs用法有基本了解，同时，该示例是用在laravel5.6框架中的，其他框架用法基本相同，只是文件路径可能有所变化，如有疑问，请在评论区留言，会尽力解答
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 文档dropload.js插件实现webApp网页上滑刷新下拉加载更多
- dropload.js插件下拉刷新和上拉加载使用详解
- 下拉刷新，上拉加载插件dropload.js使用总结
- js插件dropload上拉下滑加载数据实例解析
- JS 插件dropload下拉刷新、上拉加载使用小结
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
- jquery插件loadForm.js 编辑页表单默认数据加载
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 延迟加载图片的 jQuery 插件：LazyLoad.js及scrollLoading.js
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
- jquery插件实现图片延迟加载（lazyload.js）
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- js图片懒加载插件封装
- Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
- 延迟加载图片插件LazyLoad.js的使用方法
- Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
- js图片懒加载插件封装