测试支持多重组件嵌套

.eslintrc.js

@@ -24,7 +24,8 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'space-before-function-paren': 0
   },
   globals: {
     App: true,

src/components/card.vue

 <template>
   <div>
-    <div class="card">
+    <div class="card" :class="{'is-active': active}">
       {{text}}
-      <p class="card-item" v-for="(item, subindex) in list" :key="subindex" @tap.stop="handleTap(subindex)">
-        {{item.id + 'item.id'}}
-      </p>
+      <optio :text="item" v-for="(item, index) in list" :key="index"></optio>
     </div>
   </div>
 </template>
 
 <script>
+import optio from '@/components/option-item'
 export default {
+  components: {
+    optio
+  },
   props: ['text', 'list'],
+  data() {
+    return {
+      active: true
+    }
+  },
   methods: {
     handleTap (index) {
       console.log('card.vue', index)

src/components/option-item.vue

+<template>
+  <div class="option-item">
+    {{text}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleTap (index) {
+      console.log('card.vue', index)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/pages/counter/index.vue

 <template>
-  <div class="counter-warp">
-    <p>Vuex counter：{{ count }}</p>
-    <p>Vuex log: {{ log }}</p>
-    <p>
-      <button @click="increment">+</button>
-      <button @click="decrement">-</button>
-    </p>
-
-    <a href="/pages/index/main" class="home">去往首页</a>
+  <div class="counter-page">
+    <scroll-view
+    class="scroll-left"
+    scroll-y
+    :style="{'height': height + 'rpx'}"
+    >
+    <card v-for="(item, index) in List" :key="index" :text="item.name" :list="item.list"></card>
+    </scroll-view>
   </div>
 </template>
 
 <script>
 // Use Vuex
+import card from '@/components/card'
 import store from '@/store'
 
 export default {
@@ -24,6 +24,18 @@ export default {
       return store.state.logPage.log
     }
   },
+  components: {
+    card
+  },
+  data() {
+    return {
+      height: 400,
+      List: [{
+        name: '小米',
+        list: ['小米1', '小米2', '小米3']
+      }]
+    }
+  },
   methods: {
     increment () {
       store.commit('increment')
@@ -36,15 +48,16 @@ export default {
 </script>
 
 <style>
-.counter-warp {
-  text-align: center;
-  margin-top: 100px;
+.counter-page {
+  width: 100%;
+  background: #fff;
+  height: 100vh;
 }
-.home {
-  display: inline-block;
-  margin: 100px auto;
-  padding: 5px 10px;
-  color: blue;
-  border: 1px solid blue;
+.scroll-left {
+  width: 300rpx;
+  height: 100vh;
+  background: red;
+  color: white;
 }
+
 </style>

src/pages/index/index.vue

 <template>
   <div class="index-page">
-
+    <button class="start-button" @click="handleStart">开始</button>
   </div>
 </template>
 
@@ -22,10 +22,14 @@ export default {
   },
 
   components: {
-    card
   },
 
   methods: {
+    handleStart() {
+      wx.navigateTo({
+        url: '/pages/counter/main'
+      })
+    },
     getUserInfo () {
       wx.login({
         success: () => {
@@ -49,5 +53,8 @@ export default {
 <style scoped lang="scss">
 .index-page {
   @include ellipsis;
+  width: 100%;
+  height: 100vh;
+  background: #fff;
 }
 </style>

src/pages/index/main.js

@@ -7,6 +7,7 @@ app.$mount()
 // 这里才会导出json
 export default {
   config: {
-    navigationBarTitleText: '布里吉'
+    navigationBarTitleText: '布里吉',
+    disableScroll: true
   }
 }