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

水深无声 2023-01-03 14:30 451阅读 0赞

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

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

## 方式一： ##

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

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

**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 将数据进行缓存，在跳转过去的详情页面也好获取**

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