commit

 import Layout from './layout';
 import LayoutHeader from './layout-header';
+import LayoutScroll from './layout-scroll';
 
 export default [
   Layout,
   LayoutHeader,
+  LayoutScroll,
 ];

@@ -26,7 +26,9 @@ export default {
 <style lang="scss" scoped>
 .layout-header {
   width: 100%;
-  height: 45PX;
+  height: 44PX;
+  background-color: #444;
+  color: #fff;
   overflow: hidden;
   display: flex;
 
@@ -50,7 +52,7 @@ export default {
   .title {
     flex: 1;
     justify-content: center;
-    font-size: 30px;
+    font-size: 18PX;
   }
 
   .opts {

+<template>
+  <RecycleList ref="scroll" :on-fetch="onFetch" :options="scrollOption" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
+    <template slot="item" slot-scope="{ data }">
+      <slot name="item" :data="data">
+      </slot>
+    </template>
+  </RecycleList>
+</template>
+
+<script>
+import {Scroll, RecycleList} from 'cube-ui';
+
+export default {
+  name: 'LayoutScroll',
+  props: {
+    onFetch: Function,
+    infinite: Boolean,
+    scrollOption: {
+      type: Object,
+      default() {
+        return {
+          pullDownRefresh: true,
+          observeDOM: false,
+          pullUpLoad: true
+        };
+      }
+    }
+  },
+  methods: {
+    onPullingUp(evt) {
+      this.$emit('pulling-up', evt);
+    },
+    onPullingDown(evt) {
+      this.$emit('pulling-down', evt);
+    },
+  },
+  components: {Scroll, RecycleList}
+};
+</script>

@@ -2,30 +2,14 @@
   <div class="layout">
     <slot name="header" v-if="hasHeader"></slot>
     <div class="layout-content">
-      <Scroll ref="scroll" :options="scrollOption" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
-        <slot></slot>
-      </Scroll>
+      <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
-import {Scroll} from 'cube-ui';
-
 export default {
   name: 'Layout',
-  props: {
-    scrollOption: {
-      type: Object,
-      default() {
-        return {
-          pullDownRefresh: true,
-          observeDOM: false,
-          pullUpLoad: true
-        };
-      }
-    }
-  },
   data() {
     return {
       hasHeader: false,
@@ -36,15 +20,6 @@ export default {
       this.hasHeader = true;
     }
   },
-  methods: {
-    onPullingUp(evt) {
-      this.$emit('pulling-up', evt);
-    },
-    onPullingDown(evt) {
-      this.$emit('pulling-down', evt);
-    },
-  },
-  components: {Scroll}
 };
 </script>
 

 <template>
   <Layout>
     <LayoutHeader slot='header' title="推荐" :share="shareData"></LayoutHeader>
-    <div class="article-content">
-      page-content
-    </div>
+    <LayoutScroll :infinite="true" :on-fetch="onFetch">
+      <div class="article-item" slot="item" slot-scope="{ data }">
+        <div :id="data.id" class="item">
+          <div class="avatar" :style="{backgroundImage: 'url(' + (data.avatar || '') + ')'}"></div>
+          <div class="bubble">
+            <p>{{ data.name }}</p>
+            <div class="meta">
+              <time class="posted-date">{{ data.time }}</time>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LayoutScroll>
   </Layout>
 </template>
 
 <script>
-
+import {createNamespacedHelpers} from 'vuex';
 import {Scroll, Loading} from 'cube-ui';
+const {mapState, mapActions, mapMutations} = createNamespacedHelpers('article');
 
 export default {
   name: 'ArticlePage',
@@ -20,12 +31,28 @@ export default {
   data() {
     return {
       list: [],
+      shareData: {},
       scrollOptions: {
         bounce: false
-      }
+      },
+      inx: 0
     };
   },
+  computed: {
+    ...mapState(['articleList']),
+  },
   methods: {
+    onFetch() {
+      const items = Array.from({length: 50}).map((v, i) => {
+        return {
+          name: 'chenfeng' + (i + 50 * this.inx)
+        }
+      })
+
+      this.inx++;
+
+      return Promise.resolve(items);
+    },
     click() {
       this.$refs.actionSheet.show();
       setTimeout(() => {
@@ -46,31 +73,8 @@ export default {
 };
 </script>
 
-<style>
-  .page {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: gray;
-  }
-
-  .content {
-    width: 100%;
-    height: 100vh;
-    background-color: white;
-  }
-
-  .item {
-    background-color: white;
-  }
-
-  .loading {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
+<style lang="scss" scoped>
+.article-item {
+  height: 100px;
+}
 </style>

+export default function() {
+  return {
+    state: {
+      articleList: []
+    }
+  };
+}

@@ -36,7 +36,7 @@ if (!isDev) {
 const getContext = (req) => {
   return {
     url: req.url,
-    title: 'BLK2！',
+    title: '',
     user: req.user,
     env: {
       isApp: req.yoho.isApp,