


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></navigator>
component to realize that clicking on each product jumps to the details page ; Use <image></image>
and <text></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></image>
and <text></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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Chinese version
Chinese version, very easy to use

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
