How to implement the WeChat applet page jump function to jump from the item in the list to the next page

This article mainly introduces the WeChat mini program page jump function and the method of jumping from the item item in the list to the next page. It summarizes and analyzes the WeChat mini program page jump and list item jump based on specific examples. Friends who need relevant operating skills on the page can refer to the following

This article describes the example of the page jump function of the WeChat applet on how to jump from the item in the list to the next page. Share it with everyone for your reference. The details are as follows:

Many projects will have a message record page, that is, a list page. Then click on an item in the list to enter the message details page. Here is the continuation of the previous article. , continue to share how to jump from the item in the list to the next page.

1. Rendering

Move from the list page on the left to the details page on the right

2. Jumping between pages

The first thing to look at is the page jumping. WeChat mini program has three jumping methods. Choice:

1. Keep the current page and jump to a page in the application. Use wx.navigateBack to return to the original page.

wx.navigateTo({
 url: 'test?id=1'
})

2. Close the current page and jump to a page within the application.

wx.redirectTo({
 url: 'test?id=1'
})

3. Jump to the tabBar page and close all other non-tabBar pages

wx.switchTab({
 url: '/index'
})

Note: wx.navigateBack(OBJECT)Close the current page and return to the previous page or multi-level page. You can get the current page stack through getCurrentPages()) and decide how many layers need to be returned.

3. Jump from the list item to the next page

The first step is to render the list and use wx:for on the component. By binding the control property to an array, the component can be repeatedly rendered using the data of each item in the array. By default, the subscript variable name of the current item in the array defaults to index, and the variable name of the current item in the array defaults to item

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

The second step is to use wx:key Bind identifiers to the items in the list

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

The third step is to pass the corresponding parameters to the link corresponding to each item and use navigator navigation on the layout page Component, specify the URL and pass the corresponding parameters for the link corresponding to each item. Just follow the URL with ? and the key value. Multiple parameters are connected with &, for example:

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

4. Demo source code

  
    {{item.name}}
  

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Implementation of input input and dynamic setting buttons in WeChat Mini Program

Page in WeChat Mini Program Ways of communication between

Introduction to defining global data and function reuse and templates in WeChat mini programs

The above is the detailed content of How to implement the WeChat applet page jump function to jump from the item in the list to the next page. For more information, please follow other related articles on the PHP Chinese website!