首页优化

src/utils/tool.js

+/*函数节流*/
+function throttle(fn, interval) {
+    var enterTime = 0;//触发的时间
+    var gapTime = interval || 300;//间隔时间，如果interval不传，则默认300ms
+    return function () {
+        var context = this;
+        var backTime = new Date();//第一次函数return即触发的时间
+        if (backTime - enterTime > gapTime) {
+            fn.call(context, arguments);
+            enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
+        }
+    };
+}
+
+/*函数防抖*/
+function debounce(fn, interval) {
+    console.log('防抖抖~~~');
+    var timer;
+    var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
+    return function () {
+        clearTimeout(timer);
+        var context = this;
+        var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
+        timer = setTimeout(function () {
+            fn.call(context, args);
+        }, gapTime);
+    };
+}
+
+export default {
+    throttle,
+    debounce
+};
\ No newline at end of file

static/css/skeleton.wxss

+.skeleton-item{
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.5px;
+}
+.skeleton-bg {
+    background: #f2f3f5;
+}
+
+.skeleton-img{
+    height: 150px;
+    margin-top: 10px;
+}
+.skeleton-title{
+    height: 25px;
+    margin-top: 10px;
+}
+
+.skeleton-detail{
+    height: 10px;
+    margin-top: 5px;
+}
+.skeleton-price{
+    height: 15px;
+    margin-top: 5px;
+}
+
+.skeleton-animate {
+    animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+@keyframes skeleton-blink {
+    50% {
+        opacity: 0.6;
+    }
+}
\ No newline at end of file