유니앱 목록에서 세부정보 페이지로 이동하는 방법

모바일 앱이 발전함에 따라 애플리케이션에서 데이터 목록을 표시하고 관리해야 하는 필요성이 점점 더 커지고 있습니다. 일반적인 요구 사항 중 하나는 목록 항목을 클릭한 후 세부 정보 페이지로 이동하는 것입니다. UniApp에서 이 기능을 구현하는 것은 매우 간단합니다. 이 기사에서는 구체적인 구현 단계를 소개합니다.

1. 상세 페이지 만들기

상세 페이지를 생성하기 전, 목록 페이지가 생성되었는지, 데이터가 정상적으로 표시되는지 확인해야 합니다. 아직 목록 페이지를 만들지 않았다면 UniApp 공식 문서의 샘플 코드를 참고하세요.

세부 정보 페이지를 만들기 전에 페이지를 저장할 프로젝트 루트 디렉터리에 "페이지" 폴더를 만들어야 합니다. 다음으로, 새로운 "detail" 폴더를 생성하고 그 안에 새로운 "detail.vue" 파일을 생성합니다. 이 파일은 아래와 같이 세부정보 페이지입니다.

<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>

이것은 제목과 콘텐츠 섹션이 있는 간단한 페이지입니다. 목록 페이지에서 데이터를 가져와서 표시할 세부정보 페이지로 전달합니다.

2. 목록 페이지에서 세부정보 페이지로 이동

목록 페이지에서 목록 항목을 클릭하면 해당 항목의 데이터를 세부정보로 전달할 수 있습니다. 페이지 및 점프 세부정보 페이지로 이동하여 표시합니다. 구체적인 구현 단계는 다음과 같습니다.

1. 목록 항목에 클릭 이벤트를 추가합니다.

"pages" 폴더에서 목록 페이지 파일(보통 "index.vue")을 찾아 클릭 이벤트를 추가합니다. 템플릿 핸들러의 각 목록 항목에 대한 코드는 다음과 같습니다.

<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>

이 코드에서는 각 li 요소에 대해 "@click" 이벤트 핸들러를 추가하고, 클릭 이벤트에서 "uni.navigateTo" API를 호출하고, 세부정보 페이지, 목록 항목의 데이터는 URL 매개변수를 통해 세부정보 페이지로 전달됩니다.

"toDetail" 메소드에서 "uni.navigateTo" API를 호출했는데, 이 API는 새 페이지로 이동하고 현재 페이지의 탐색 표시줄에 "돌아가기" 버튼을 추가할 수 있습니다. 사용자가 뒤로 버튼을 클릭하면 이전 페이지로 돌아갈 수 있습니다.

2. 데이터 수신 및 표시

상세 페이지의 "onLoad" 이벤트에서는 "option" 매개변수를 통해 목록 페이지에서 전달된 데이터를 가져와서 페이지에 표시할 수 있습니다. 코드는 다음과 같습니다.

<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. 요약

지금까지 목록 페이지에서 세부정보 페이지로 점프하는 과정을 모두 완료했습니다. 간단한 코드 구현을 통해 사용자가 보다 편리하게 데이터를 관리하고 표시할 수 있도록 도와줍니다. 유니앱에 대해 다른 궁금한 점이 있으시면 유니앱 공식문서를 참고하시거나 메시지를 남겨서 함께 소통하고 발전해가셔도 됩니다.

위 내용은 유니앱 목록에서 세부정보 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!