uni-app 点击从信息列表页面跳转到详情页面两种方式+点击添加缓存_uniapp 列表7页点击跳转详情

在微信小程序开发中，从列表页面跳转到详情页面有两种方式：

• 通过navigator 标签进行跳转；传值可以通过url地址进行传值，这种方式通常只传递一个参数
• 封装一个超链接组件，通过插槽slot 包装；传值通过bind 变量进行传值，这种方式通常可以传递一些体谅量比较大，参数很多的情况 （超链接组件中已经封装好了跳转和接收参数，只需要通过插槽将需要引入的地方包裹起来即可完成跳转功能）

方式一：

1，在navigator 中使用变量绑定 url 的链接跳转
这里的 ${index} 为每个信息的的特有标识，将index传递给详情页

	<navigator
        v-for="(item, index) in 5"
        :key="index"
        class="lists"
        :url="`/pages/detail/index?id=${index}`">
        <view class="picContnt">
          <image
            mode="widthFix"
            src="https://p3-tt.byteimg.com/origin/pgc-image/c8a44098ce7745abb30c41bbbf3ba9eb?from=pc"
          ></image>
        </view>
      </navigator>
1
2
3
4
5
6
7
8
9
10
11
12

2，在 pages 中添加一个详情页面 /pages/detail/index.vue，在 index.vue 中通过onLoad(){}函数进行接收参数，接收了以后再将接收过来的参数作为一个新的请求的参数，发送请求

	export default{
        data() {
            return {
                id:''
            }
        },
        onLoad(ev){
            // 接受列表页传递过来的参数
            this.id = ev.id
            /*
            ** 这里的 this.request({}) 请求是之前已经在 request.js 中
            ** 通过 Promise 封装好的
            */
            this.request({ // 可以自己封装，这里只做示例
              url:'https://www.runoob.com/try/ajax/json_demo.json',
              data:{
                  id: this.id
              }
            }).then((result) => {
              console.log(result)
            }).catch((err) => {
                console.log(err)
            });
          },
        },
        mounted() {
          
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

方式二：

1，在pages 的同级页面中新建 components文件夹，其中新建 getDetail.vue组件，在组件中使用插槽slot

<template>
	<view>
		<slot></slot>
	</view>
</template>
1
2
3
4
5

2，在需要跳转的页面中引入超链接组件

import  getDetail from '@/components/getDetail'
components: {getDetail}
1
2

3，在页面中用超链接组件将需要跳转的地方包起来，将需要传递的数据通过bind绑定传递 :list='要传递的值’

<get-detail :list="item" :index="index">
	<view class="picContnt">
		<image
		mode="widthFix"
		src="https://p3-tt.byteimg.com/origin/pgc-image/c8a44098ce7745abb30c41bbbf3ba9eb?from=pc"
		></image>
	</view>
	<view class="fontContent"> 
		<view class="fontDesc">
			这是一段描述
		</view>
		<button type="primary">+ 关注</button>
	</view>
</get-detail>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4，在超链接组件getDetail.vue 中通过props接受，同时绑定点击事件，通过getApp().globalData 将数据进行缓存，在跳转过去的详情页面也好获取

<view @click="handle" style="display: flex;">
	<slot></slot>
</view>
1
2
3

export default {
	props:{
		list: Number,
		index: Number
	},
	methods:{
		handle(){
			// 将数据缓存
			getApp().globalData.list = this.list
			getApp().globalData.index = this.index
			// 点击跳转
			uni.navigateTo({
			 	url: "XXXXX", // 跳转到对应的详情页面
			})
		}
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17