【小程序商城实战-Taro3开发-课程5】自定义组件：商品列表

一、组件规范

1、自定义组件放到src/componets目录下。不同模块的组件再各自建立子目录

2、vue组件文件名称的命名规范：kebab-case 短横线分隔命名

3、其他风格规范参考：Vue风格指南

二、商品Vue组件 src\components\goods\goods.vue

<template>
  <view @tap="handleNavigate" class='goods-wrapper' >
    <view class='goods-item'>
      <view>
        <image :src="goods.imageUrl" class='goods-item-image' />
      </view>

      <view class='goods-item-info'>
        <view class="goods-item-info-title"> {{goods.title}}</view>
        <view class="goods-item-info-price">
          <view class="goods-item-info-price-wraper">
            <text class="sale-price">¥{{goods.price}}</text>
          </view>
          <view class="goods-item-info-price-wraper" v-if="goods.origin">
            <text class="origin-price">¥{{goods.origin}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Vue from 'vue'
import { eventCenter } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import './goods.scss'
export default {
  props: ['goods'],
  methods: {
    handleNavigate () {
    }
  }
}
</script>

三、商品列表Vue组件src\components\goods\goods_list.vue

<template>
  <view className='goods-list'>
    <loading v-if="loading" />
    <goods
      v-else
      v-for="g in goodsList"
      :key="g.id"
      :goods="g"
    />
  </view>
</template>

<script >
import Vue from 'vue'
import Loading from '../loading.vue'
import Goods from './goods.vue'
export default {
  components: {
    'loading': Loading,
    'goods': Goods
  },
  props: {
    goodsList: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: true
    }
  }
}
</script>   

四、页面组件src\pages\index\index.vue

<template>
  <view class='goods-container'>
    <goods-list-component
      :goodsList="goodsList"
      :loading="loading"
    />
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import Vue from 'vue'
import GoodsList from '../../components/goods/goods_list.vue'
import './index.scss'
import res from '../../data/goodsList.json'

export default {
  components: {
    'goods-list-component': GoodsList
  },
  data () {
    return {
      loading: true,
      goodsList: []
    }
  },
   async created() {
    try {
      console.log('created')
      console.log(res)
      // const res = await Taro.request({
      //   url: api.getLatestTopic()
      // })
      this.loading = false
      this.goodsList = res.data.list
    } catch (error) {
      Taro.showToast({
        title: '载入远程数据错误'
      })
    }
  },
  onLoad () {
    console.log('onLoad')
  },
  onShow () {
    console.log('onShow')
  },
  onReady () {
    console.log('onReady')
  },
  onHide () {
    console.log('onHide')
  },
}
</script>