update

pages/SelfServiceTool/Cyclopedia/Detail.js

 //index.js
 //获取应用实例
+import ArticleList from './article.js'
 const app = getApp()
 
 Page({
       title: '购房百科'
     })
   },
+  onLoad(e) {
+    let Detail = null
+    ArticleList.ArticleList.map((item) => {
+      if (item.Type - 0 === e.type - 0) {
+        item.List.map((subItem) => {
+          if (subItem.Id - 0 === e.id - 0) {
+            Detail = subItem
+          }
+        })
+      }
+    })
+    this.setData({
+      Detail: Detail
+    })
+  },
   data: {
     UserInfo: app.globalData.UserInfo, // 用户信息
-    Detail: {
-      Title: '示例标题',
-      Publisher: '发布人',
-      CreateDate: '2019-02-02',
-      Content: ''
-    }
+    Detail: null
   }
 })

pages/SelfServiceTool/Cyclopedia/Detail.wxml

     <text class="flex-item">{{Detail.Publisher}}</text>
     <text>{{Detail.CreateDate}}</text>
   </view>
-  <rich-text class="content">{{Detail.Content}}</rich-text>
+  <view class="banner" style="padding: 0 40rpx;position:relative;overflow:hidden;margin: 40rpx auto 0;">
+    <image mode="widthFix" src="{{Detail.MainImg}}" style="width: 100%;"></image>
+  </view>
+  <view class="richText">
+    <rich-text class="content" nodes="{{Detail.Content}}"></rich-text>
+  </view>
 </view>

pages/SelfServiceTool/Cyclopedia/Detail.wxss

 
 .subInfo text:first-child{
   color: #bb9c79;
+}
+
+.richText {
+  padding: 0 40rpx;
+  position: relative;
+  overflow: hidden;
 }

pages/SelfServiceTool/Cyclopedia/article.js

+import ArticleContentList from './articleContent.js'
+
 const ArticleList = [{
   Type: 1,
   List: [{
     Id: '1',
-    MainImg: '',
+    MainImg: 'https://whole-estate.oss-cn-beijing.aliyuncs.com/notebaike-1.jpg',
     Title: '如何选择靠谱的房地产开发商？',
-    Content: '',
+    Remark: '居民购置房产时，从看房、选房、购房、交房到入住及后期管理维护，最经常打交道的就是开发商',
+    Content: ArticleContentList.ArticleContentList[0],
     Publisher: '银城江北公司',
     CreateDate: '2019-03-28 14:05:02',
-    Banner: []
+    Type: 1
   }, {
     Id: '2',
-    MainImg: '',
+    MainImg: 'https://whole-estate.oss-cn-beijing.aliyuncs.com/notebaike-2.jpg',
     Title: '何为土地使用年限&产权年限？',
-    Content: '',
+    Remark: '对于大多数人来说，房子这最重要的财产可不容一点马虎！70年后，我们的房子还属于我们吗？到期后，我们又该做点啥？',
+    Content: ArticleContentList.ArticleContentList[1],
     Publisher: '银城江北公司',
     CreateDate: '2019-03-28 14:05:02',
-    Banner: []
+    Type: 1
   }]
 }, {
   Type: 2,
   List: [{
     Id: '3',
-    MainImg: '',
+    MainImg: 'https://whole-estate.oss-cn-beijing.aliyuncs.com/notebaike-3.jpg',
     Title: '到底地段重要还是户型重要呢？',
-    Content: '',
+    Remark: '每位购房者在选房时都会考虑很多因素。其中常常让很多人纠结的一个问题就是:到底地段重要还是户型重要呢？',
+    Content: ArticleContentList.ArticleContentList[2],
     Publisher: '银城江北公司',
     CreateDate: '2019-03-28 14:05:02',
-    Banner: []
+    Type: 2
   }, {
     Id: '4',
-    MainImg: '',
+    MainImg: 'https://whole-estate.oss-cn-beijing.aliyuncs.com/notebaike-4.jpg',
     Title: '买房是应该买精装房还是毛坯房？',
-    Content: '',
+    Remark: '购买精装房还是毛坯房，哪个更划算呢？很多人在面临这个问题时不知道怎样选择，也不知道哪个更适合自己，精装房省时省力',
+    Content: ArticleContentList.ArticleContentList[3],
     Publisher: '银城江北公司',
     CreateDate: '2019-03-28 14:05:02',
-    Banner: []
+    Type: 2
   }]
 }, {
   Type: 3,
   List: [{
     Id: '5',
-    MainImg: '',
+    MainImg: 'https://whole-estate.oss-cn-beijing.aliyuncs.com/notebaike-5.jpg',
     Title: '解读购房签约',
-    Content: '',
+    Remark: '在我们买房签合同后，还需要网签，很多人并不了解网签是什么？下面小编就为大家介绍下网签的好处以及一些注意事项，以供参考',
+    Content: ArticleContentList.ArticleContentList[4],
     Publisher: '银城江北公司',
     CreateDate: '2019-03-28 14:05:02',
-    Banner: []
+    Type: 3
   }]
 }, {
   Type: 4,
   List: [{
     Id: '6',
-    MainImg: '',
+    MainImg: 'https://whole-estate.oss-cn-beijing.aliyuncs.com/notebaike-6.jpg',
     Title: '新手必备收房攻略',
-    Content: '',
+    Remark: '通常情况下，我们购买的房子就是毛坯房，一般小区建好以后，就会交房，而交房重要的一步就是要验收，只有质量合格的房子才能够交房',
+    Content: ArticleContentList.ArticleContentList[5],
     Publisher: '银城江北公司',
     CreateDate: '2019-03-28 14:05:02',
-    Banner: []
+    Type: 4
   }]
 }]
 
 module.exports = {
   ArticleList: ArticleList
-}
-
+}

pages/SelfServiceTool/Cyclopedia/index.js

       title: '购房百科'
     })
   },
+  onLoad() {
+    this.ReturnList()
+  },
   data: {
     UserInfo: app.globalData.UserInfo, // 用户信息
     NavList: [{
       id: '4'
     }],
     ActiveIndex: 0,
-    List: [{
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }, {
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }, {
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }, {
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }, {
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }, {
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }, {
-      Img: '/assets/images/img5.jpg',
-      Name: '示例标题',
-      Remark: '示例副标题'
-    }]
+    List: []
   },
   CutNav(e) {
     this.setData({
       ActiveIndex: e.target.dataset.index
     })
+    this.ReturnList()
+  },
+  ReturnList() {
+    let aArr = []
+    ArticleList.ArticleList.map((item) => {
+      if (item.Type - 0 === this.data.NavList[this.data.ActiveIndex].id - 0) {
+        aArr = item.List
+      }
+    })
+    this.setData({
+      List: aArr
+    })
   },
   TapItem(e) {
     wx.navigateTo({
-      url: '/pages/SelfServiceTool/Cyclopedia/Detail?id=' + e.target.dataset.id,
+      url: '/pages/SelfServiceTool/Cyclopedia/Detail?id=' + e.target.dataset.id + '&type=' + e.target.dataset.type,
     })
   }
 })

pages/SelfServiceTool/Cyclopedia/index.wxml

   </view>
   <view class="MainPage">
     <view class="list">
-      <view class="flex-h" wx:for="{{List}}" wx:for-item="item" wx:for-index="idx" wx:key="key" data-id="{{item.id}}" bindtap="TapItem">
+      <view class="flex-h" wx:for="{{List}}" wx:for-item="item" wx:for-index="idx" wx:key="key" data-type="{{item.Type}}" data-id="{{item.Id}}" bindtap="TapItem">
         <view class="img">
-          <image mode="aspectFill" src="{{item.Img}}" class="centerLabel cover"></image>
+          <image mode="aspectFill" src="{{item.MainImg}}" class="centerLabel cover" data-type="{{item.Type}}" data-id="{{item.Id}}"></image>
         </view>
-        <view class="flex-item">
-          <text>{{item.Name}}</text>
-          <text>{{item.Remark}}</text>
+        <view class="flex-item" data-type="{{item.Type}}" data-id="{{item.Id}}">
+          <text data-type="{{item.Type}}" data-id="{{item.Id}}">{{item.Title}}</text>
+          <text data-type="{{item.Type}}" data-id="{{item.Id}}">{{item.Remark}}</text>
         </view>
       </view>
     </view>