在微信小程序开发中,从列表页面跳转到详情页面有两种方式:
- 通过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", // 跳转到对应的详情页面
})
}
},
}