집 >위챗 애플릿 >미니 프로그램 개발 >목록의 항목에서 다음 페이지로 이동하는 WeChat 애플릿 페이지 점프 기능을 구현하는 방법

목록의 항목에서 다음 페이지로 이동하는 WeChat 애플릿 페이지 점프 기능을 구현하는 방법

不言원래의: 2018-06-26 17:31:183842검색

이 글에서는 위챗 미니 프로그램 페이지 점프 기능과 목록 항목에서 다음 페이지로 점프하는 방법을 주로 소개합니다. 위챗 미니 프로그램 페이지 점프와 목록 항목 점프 페이지를 구체적인 사례를 바탕으로 정리 분석합니다. 필요한 친구는 관련 조작 기술을 참고할 수 있습니다.

이 기사에서는 WeChat 애플릿 페이지 점프 기능의 예와 목록의 항목에서 다음 페이지로 점프하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요.

많은 프로젝트에는 메시지 기록 페이지, 즉 목록 페이지가 있습니다. 그런 다음 목록에서 항목을 클릭하여 메시지 세부 정보 페이지로 들어갑니다. 이전 기사에 이어 계속 공유하는 방법 목록의 항목에서 다음 페이지로 이동합니다.

1. 효과 사진

왼쪽 목록 페이지에서 오른쪽 상세 페이지로 이동

2. 페이지 간 이동

가장 먼저 살펴봐야 할 것은 페이지 점프 전송, WeChat 애플릿에는 선택할 수 있는 세 가지 점프 방법이 있습니다:

1. 현재 페이지를 유지하고 애플리케이션의 페이지로 점프하려면 wx.navigateBack을 사용하세요. wx.navigateBack可以返回到原页面。

wx.navigateTo({
 url: &#39;test?id=1&#39;
})

2、关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
 url: &#39;test?id=1&#39;
})

3、跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
 url: &#39;/index&#39;
})

注：wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages())

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

2. 현재 페이지를 닫고 앱 내 페이지로 이동합니다.

<view wx:for="{{array}}" wx:key="{{item.viewid}}">
 {{index}}: {{item.message}}
</view>

3. tabBar 페이지로 이동하고 tabBar가 아닌 다른 모든 페이지를 닫습니다.

url="../detail/detail?index={{item.viewid}}"

참고:

wx.navigateBack(OBJECT)현재 페이지를 닫습니다. , 이전 페이지 또는 다중 레벨 페이지로 돌아갑니다. getCurrentPages())를 통해 현재 페이지 스택을 가져오고 반환해야 하는 레이어 수를 결정할 수 있습니다.

3. 목록 항목에서 다음 페이지로 이동

첫 번째 단계는 목록을 렌더링하고 구성 요소의 wx:for 제어 속성을 사용하여 배열을 바인딩하여 각 항목의 데이터를 사용하는 것입니다. 배열을 반복적으로 렌더링합니다. 기본적으로 배열에 있는 현재 항목의 첨자 변수 이름은 기본적으로 index로 설정되고 배열에 있는 현재 항목의 변수 이름은 기본적으로 item


  
    {{item.name}}

두 번째 단계는 wx:key를 사용하여 바인딩하는 것입니다. 목록의 항목에 대한 식별자

Page({
 data: {
   words: [{message: &#39;微信小程序&#39;,viewid:&#39;1&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;2&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;3&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;4&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;5&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;6&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;7&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;8&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;9&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;}]
 }
 ...
})

세 번째 단계는 각 항목에 해당하는 링크에 해당 매개변수를 전달하고, 레이아웃 페이지의 탐색기 탐색 구성 요소를 사용하고, URL을 지정하고 해당 매개변수를 전달하는 것입니다. 각 항목에 해당하는 링크는 URL? 및 키 값이 충분하며 여러 매개변수가 &로 연결되어 있습니다. 예:

rrreee

IV.

rrreee

위 내용은 전체 기사 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

목록의 항목에서 다음 페이지로 이동하는 WeChat 애플릿 페이지 점프 기능을 구현하는 방법

관련 기사