update loading use

miniprogram/pages/home/home.js

@@ -12,9 +12,9 @@ Page({
     content: '我是父组件的content',
     footContent: "bottomContent",
     headBackground: [
-      { class: 'header-swiper-one', content: '数据分析' ,articleId:32},
-      { class: 'header-swiper-two', content: '前端开发' ,articleId:33},
-      { class: 'header-swiper-three', content: '全栈开发',articleId:34 }
+      { class: 'header-swiper-one', content: '数据分析' ,articleId:32,img:'https://yongma16.xyz/staticFile/common/img/data.png'},
+      { class: 'header-swiper-two', content: '前端开发' ,articleId:33,img:'https://yongma16.xyz/staticFile/common/img/front.png'},
+      { class: 'header-swiper-three', content: '全栈开发',articleId:34,img:'https://yongma16.xyz/staticFile/common/img/back.png' }
     ],
     swiperConfig: {
       indicatorDots: true,
@@ -23,7 +23,7 @@ Page({
       autoplay: false,
       interval: 5000,
       duration: 1000,
-      indicatorColor: "#2e86de",
+      indicatorColor: "rgba(255,255,255,.2)",
       indicatorActiveColor: "#dff9fb",
     },
     menuIsShow: false,
@@ -55,8 +55,13 @@ Page({
     const articleObjId=this.data.headBackground[0].articleId
     this.updateHomeContent(articleObjId)
   },
+  /**
+   * 更新
+   * @param {*} articleObjId
+   */
   updateHomeContent(articleObjId){
-    this.triggerHomeContent(articleObjId)
+    this.triggerClearHomeContent()
+    this.triggerGetHomeContent(articleObjId)
   },
   /**
    * 卡片变动修改内容
@@ -70,11 +75,19 @@ Page({
   /**
    * 触发子组件跟新id
    */
-  triggerHomeContent(id){
+  triggerGetHomeContent(id){
     const homeComponent = this.selectComponent('#home-content-id')
     homeComponent.getRemoteArticle(id)
   },
 
+    /**
+   * 触发子组件删除article
+   */
+  triggerClearHomeContent(){
+    const homeComponent = this.selectComponent('#home-content-id')
+    homeComponent.clearArticle()
+  },
+
   /**
    * 获取文章
    * @param {*} id
@@ -83,6 +96,7 @@ Page({
     const paramId=this.data.currentArticleId;
     const blogComponent = this.selectComponent('#blog-id')
     blogComponent.setLoading(true)
+    blogComponent.clearArticleNode()
     const baseUrl = this.data.baseUrl
     const path = this.data.path
     const that=this

miniprogram/pages/home/home.wxml

@@ -19,7 +19,9 @@
       <swiper indicator-dots="{{swiperConfig.indicatorDots}}" indicator-color="{{	swiperConfig.indicatorColor}}" indicator-active-color="{{swiperConfig.indicatorActiveColor}}" autoplay="{{ swiperConfig.autoplay }}" interval="{{swiperConfig.interval}}" duration="{{swiperConfig.duration}}" class="swiper-design" bindchange="swiperChange">
         <block wx:for="{{headBackground}}" wx:key="*this">
           <swiper-item>
-            <view class="swiper-item {{item.class}}">
+            <view class="swiper-item {{item.class}}"
+            style="background: url({{item.img}});"
+            >
               {{item.content}}
             </view>
           </swiper-item>

miniprogram/pages/home/home.wxss

@@ -10,7 +10,7 @@ page {
   position: relative;
   width: 100vw;
   height:100vh;
-  background: rgba(4, 173, 240, 0.6);
+  background: transparent;
 }
 
 /* 箭头 //上右边下左 */
@@ -120,16 +120,24 @@ page {
   width: 100%;
   text-align: center;
   line-height: 150px;
+  font-weight: bold;
   height: 100%;
+  background-color: rgba(0, 183, 255,.9)
 }
 .header-swiper-one{
-  background-color: rgba(0, 183, 255,.8);
+  background-repeat: no-repeat;
+  background-size: cover;
+  /* background-color: rgba(0, 183, 255,.9); */
 }
 .header-swiper-two{
-  background-color: rgba(0, 183, 255,.9);
+  background-repeat: no-repeat;
+  background-size: cover;
+  /* background-color: rgba(0, 183, 255,.9); */
 }
 .header-swiper-three{
-  background-color:rgba(0, 183, 255,1);
+  background-repeat: no-repeat;
+  background-size: cover;
+  /* background-color:rgba(0, 183, 255,.9); */
 }
 
 .caontainer-header content-title{
@@ -179,6 +187,7 @@ page {
 }
 .btn-actived{
   color:#ffffff;
+  font-weight: bold;
   background-color:  rgb(8, 183, 252);
   border:1px solid  rgb(8, 183, 252);
   box-shadow: 0 5px 5px 5px rgba(8, 183, 252,.5);