UniApp Design and Development Guide for Implementing List Pages and Details Pages

UniApp is a cross-platform development framework based on Vue.js, which can quickly build mobile applications, small programs and H5 pages. In UniApp, it is a very common requirement to implement the design and development of list pages and detail pages. This article will introduce you to how to design and develop list pages and details pages in UniApp, and explain it through code examples.

1. Design the list page
When designing the list page, we first need to determine the data displayed in the list and the display method. The following is a simple example showing a product list:

<template>
  <view>
    <navigator v-for="product in productList" :url="'/pages/detail?id=' + product.id">
      <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
      <text>{{ product.name }}</text>
      <view class="product-info">
        <text>价格：{{ product.price }}</text>
        <text>库存：{{ product.stock }}</text>
      </view>
    </navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        productList: [
          {
            id: 1,
            imgUrl: 'http://example.com/product1.jpg',
            name: '商品1',
            price: 100,
            stock: 10
          },
          {
            id: 2,
            imgUrl: 'http://example.com/product2.jpg',
            name: '商品2',
            price: 200,
            stock: 20
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 200rpx;
    height: 200rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

In the above code, we use the <navigator> component to realize that clicking on each product jumps to the details page ; Use <image> and <text> components to display product pictures, names, prices, inventory and other information. Use the v-for instruction to traverse the productList array to display multiple products.

2. Design the details page
The details page generally displays the detailed information of a single product. When designing the details page, we can display more product information based on actual needs, such as product descriptions, specifications, reviews, etc. The following is a simple example showing product details:

<template>
  <view>
    <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
    <text>{{ product.name }}</text>
    <view class="product-info">
      <text>价格：{{ product.price }}</text>
      <text>库存：{{ product.stock }}</text>
    </view>
    <text>{{ product.description }}</text>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        product: {
          id: 1,
          imgUrl: 'http://example.com/product1.jpg',
          name: '商品1',
          price: 100,
          stock: 10,
          description: '这是商品1的描述信息。'
        }
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 300rpx;
    height: 300rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

In the above code, we use the <image> and <text> components Display information such as product pictures, name, price, inventory, and description.

3. Develop list pages and detail pages
When developing list pages and detail pages in UniApp, we can use the component development method of Vue.js. The list page and details page can be encapsulated into a component respectively and referenced where needed. The following is an example that shows how to develop list page and detail page components:

<!-- 列表页组件 -->
<template>
  <view>
    <navigator v-for="product in productList" :url="'/pages/detail?id=' + product.id">
      <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
      <text>{{ product.name }}</text>
      <view class="product-info">
        <text>价格：{{ product.price }}</text>
        <text>库存：{{ product.stock }}</text>
      </view>
    </navigator>
  </view>
</template>

<script>
  export default {
    props: {
      productList: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 200rpx;
    height: 200rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

<!-- 详情页组件 -->
<template>
  <view>
    <image :src="product.imgUrl" class="product-img" mode="aspectFit"></image>
    <text>{{ product.name }}</text>
    <view class="product-info">
      <text>价格：{{ product.price }}</text>
      <text>库存：{{ product.stock }}</text>
    </view>
    <text>{{ product.description }}</text>
  </view>
</template>

<script>
  export default {
    props: {
      product: {
        type: Object,
        default: () => ({})
      }
    }
  }
</script>

<style scoped>
  .product-img {
    width: 300rpx;
    height: 300rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
  }
</style>

In the above code, we encapsulate the list page and detail page into List and Detail respectively component and pass data through props. The list page component accepts an array named productList, and the details page component accepts an object named product.

4. Summary
Through the above design and development guidelines, we can easily implement the design and development of list pages and details pages in UniApp. First determine the data displayed in the list and the display method, then design the components of the list page and details page respectively, and pass the data through props. Finally, we can display more product information or customize interactive effects according to actual needs. I hope this article will be helpful to everyone in UniApp application development!

The above is the detailed content of UniApp Design and Development Guide for Implementing List Pages and Details Pages. For more information, please follow other related articles on the PHP Chinese website!