'add'

README.md

@@ -1 +1 @@
-图片懒加载及better-scroll的运用
+图片懒加载

package.json

@@ -16,6 +16,7 @@
     "lib-flexible": "^0.3.2",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
+    "vue-lazyload": "^1.2.6",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1"
   },

src/main.js

@@ -1,13 +1,15 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import VueResource from 'vue-resource'
+import VueLazyload from 'vue-lazyload'
 import 'styles/reset.css'
 import 'styles/border.css'
 import 'styles/iconfont.css'
 import 'lib-flexible/flexible.js'
 
-Vue.use(VueResource)
+Vue.use(VueLazyload, {
+  loading: '/static/images/loading.gif'
+})
 
 Vue.config.productionTip = false
 

src/view/home.vue

@@ -1,34 +1,34 @@
 <template>
-    <div class="home">
-        <my-header></my-header>
-        <carousel :swiperData='swiperData'></carousel>
-        <!-- 分类 -->
-        <div class="classification">
-            <div class="class_top">
-                <div class="item" v-for="(item,index) in classifiData.up" :key="index">
-                    <img :src="item" alt="">
-                </div>
-            </div>
-            <div class="class_bottom">
-                <div class="item" v-for="(item,index) in classifiData.down" :key="index">
-                    <img :src="item" alt="">
-                </div>
-            </div>
+  <div class="home">
+    <my-header></my-header>
+    <carousel :swiperData='swiperData'></carousel>
+    <!-- 分类 -->
+    <div class="classification">
+      <div class="class_top">
+        <div class="item" v-for="(item,index) in classifiData.up" :key="index">
+          <img :src="item" alt="">
         </div>
-        <!-- 推荐 -->
-        <div class="recommend">
-            <div class="title">今日推荐</div>
-            <div class="content">
-                <div class="item" v-for="(item,index) in recommendData" :key="index">
-                    <img :src="item.imgurl" alt="">
-                    <div class="item_text">
-                        <span>{{item.title}}</span>
-                        <span>剩 {{item.endtime}} 天</span>
-                    </div>
-                </div>
-            </div>
+      </div>
+      <div class="class_bottom">
+        <div class="item" v-for="(item,index) in classifiData.down" :key="index">
+          <img :src="item" alt="">
         </div>
+      </div>
     </div>
+    <!-- 推荐 -->
+    <div class="recommend">
+      <div class="title">今日推荐</div>
+      <div class="content">
+        <div class="item" v-for="(item,index) in recommendData" :key="index">
+          <img v-lazy="item.imgurl" alt="">
+          <div class="item_text">
+            <span>{{item.title}}</span>
+            <span>剩 {{item.endtime}} 天</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import MyHeader from "@/components/myHeader";
@@ -103,6 +103,12 @@ export default {
           height: 4.8rem;
           display: block;
         }
+        img[lazy="loading"] {
+          display: block;
+          width: 50px;
+          height: 50px;
+          margin: 0 auto;
+        }
         .item_text {
           box-sizing: border-box;
           display: flex;