How to jump to the details page in uniapp list

With the development of mobile APP, we increasingly need to display and manage data lists in the application. One of the common needs is to jump to the details page after clicking on the list item. It is very simple to implement this function in UniApp. This article will introduce you to the specific implementation steps.

1. Create the details page

Before creating the details page, we need to ensure that the list page has been created and the data can be displayed normally. If you haven't created a list page yet, you can refer to the sample code in the UniApp official documentation.

Before creating the details page, we need to create a "pages" folder in the project root directory to store our pages. Next, create a new "detail" folder and create a new "detail.vue" file in it. This file is our details page, as shown below:

<template>
  <div class="uni-page">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  onLoad(option) {
    this.title = option.title
    this.content = option.content
  }
}
</script>

This is a simple page, containing a title and a content part. We will get the data in the list page and pass it to the details page for processing show.

2. Jump from the list page to the details page

In the list page, we need to add a click event for each list item. When the list item is clicked, the data of the item can be Pass it to the details page and jump to the details page for display. The specific implementation steps are as follows:

1. Add a click event to the list item

Find the file of the list page (usually "index.vue") in the "pages" folder, in the template Add a click event handler for each list item, the code is as follows:

<template>
  <ul>
    <li @click="toDetail(item)" v-for="(item,index) in list" :key="index">{{item.title}}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    // 获取列表数据
    this.getList()
  },
  methods: {
    getList() {
      // 省略获取列表数据的代码
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/detail/detail?title=' + item.title + '&content=' + item.content
      })
    }
  }
}
</script>

In this code, we add a "@click" event handler for each li element, and call "uni. navigateTo" API, jump to the details page, and pass the list item data to the details page through the url parameter.

In the "toDetail" method, we called the "uni.navigateTo" API, which can jump to a new page and add a "return" button to the navigation bar of the current page. When the user clicks the back button, they can return to the previous page.

2. Receive and display data

In the "onLoad" event of the details page, we can obtain the data passed from the list page through the "option" parameter and display it in on the page. The code is as follows:

<template>
  <div class="uni-page">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  onLoad(option) {
    this.title = option.title
    this.content = option.content
  }
}
</script>

3. Summary

So far, we have completed the entire process of jumping from the list page to the details page. Through simple code implementation, we can help users manage and display data more conveniently. If you have other questions about UniApp, you can refer to UniApp official documentation, or you can leave messages to communicate and make progress together.

The above is the detailed content of How to jump to the details page in uniapp list. For more information, please follow other related articles on the PHP Chinese website!