• 商品列表页
    • 1. 在首页中添加代码
    • 2. 在component中添加该文件
    • 总结

    商品列表页

    商品列表， 在我们的首页有一部分， 在“列表页”（第二个Tab)也会存在。

    所以我们可以直接把抽取成为组件。

    下面以首页中引用为例：

    1. 在首页中添加代码

    1. <template>
    2.   <div class="background">
    3.     <div class="home">
    4.       <div class="m_layout">
    5.         <div class="product_top">
    6.           <div class="product_left">
    7.             <div>商品列表</div>
    8.           </div>
    9.         </div>
    10.         <span class="divider" style="height: 2px;"></span>
    11.         <!-- 这里循环显示特产商品列表 -->
    12.         <SpecialMarket :id="good.id" :name="good.name" :description="good.description" :image_url="good.image_url" v-for="good in goods"></SpecialMarket>
    13.       </div>
    14.     </div>
    15.     <NavBottomView :is_shops_index="is_shops_index"></NavBottomView>
    16.   </div>
    17. </template>
    18. <script>
    19.     // 在这里引入 特产component
    20.     import SpecialMarket from '../../components/SpecialMarket.vue';
    21. </script>

    上面的核心代码按如下：

    1. <!-- 这里循环显示特产商品列表 -->
    2. <SpecialMarket :id="good.id" :name="good.name" :description="good.description" :image_url="good.image_url" v-for="good in goods"></SpecialMarket>

    使用了v-for 和 componment的组合，来显示列表。

    2. 在component中添加该文件

    新增文件 src/components/SpecialMarket.vue: 

    1. <template>
    2.   <div>
    3.     <div @click="show_goods_details" class="fu_li_zhuan_qu" >
    4.       <img :src="image_url" class="logo_image"/>
    5.       <div class="content" >
    6.         <div class="title">
    7.           {{name}}
    8.         </div>
    9.         <div class="logo_and_shop_name">
    10.           <span v-html="description"></span>
    11.         </div>
    12.       </div>
    13.     </div>
    14.     <span class="divider" style="height: 2px;"></span>
    15.   </div>
    16. </template>
    17. <script>
    18. import { go } from '../libs/router'
    20.     export default{
    21.         data(){
    22.             return {
    23.             }
    24.         },
    25.         props: {
    26.           id: Number,
    27.           name: String,
    28.           description: String,
    29.           image_url: String,
    30.         },
    31.         mounted(){
    32.         },
    33.         methods:{
    34.          show_goods_details () {
    35.            go("/shops/goods_details?good_id=" + this.id, this.$router)
    36.          },
    37.         },
    38.         components:{
    39.         },
    40.     }
    41. </script>

    可以看到，该段代码会接受一个数组，然后循环显示。 点击任意一个按钮， 跳转到详情页面。

    总结

    这里算是最简单的地方了。