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

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

  • 通过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>

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,在pages 的同级页面中新建 components文件夹,其中新建 getDetail.vue组件,在组件中使用插槽slot

<template>
	<view>
		<slot>slot>
	view>
template>

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

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

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>

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

<view @click="handle" style="display: flex;">
	<slot>slot>
view>
export default {
	props:{
		list: Number,
		index: Number
	},
	methods:{
		handle(){
			// 将数据缓存
			getApp().globalData.list = this.list
			getApp().globalData.index = this.index
			// 点击跳转
			uni.navigateTo({
			 	url: "XXXXX", // 跳转到对应的详情页面
			})
		}
	},
}

你可能感兴趣的:(uniapp,小程序,小程序)