内置组件

<template>
  <view class="list">
    <view v-for="(item, index) in products" :key="item.id"
          class="item" @click="onTap(item)">
      <text>{{ index + 1 }}. {{ item.name }}</text>
      <text class="price">￥{{ item.price }}</text>
    </view>
    <view v-if="products.length === 0" class="empty">暂无商品</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: "苹果", price: 5.5 },
        { id: 2, name: "香蕉", price: 3.2 }
      ]
    };
  },
  methods: {
    onTap(item) {
      uni.navigateTo({ url: `/pages/detail/detail?id=${item.id}` });
    }
  }
}
</script>