uni-app跳转到详情页方法及详情页数据接收

2021-01-04   阅读:466   分类:前端    标签: uni-app

思路:

给列表项加上点击方法,并且传递id参数

使用路由API由uni.navigateTo, 保留当前页面,跳转到应用内的某个页面

文章详情页接收id,并且传递给后端去查询改id详情数据


1、保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

给列表加上点击方法,并且传递id参数 @click="play(item.id)"

<template>
<view>
         <view v-for="(item) in homeData.tv" @click="play(item.id)">
                   <view>
                            <image :src="item.vod_pic" mode=""></image>
                            <view>{{item.vod_continu}}</view>
                   </view>
                   <view>{{item.vod_name}}</view>
                   <view>{{item.vod_content}}</view>
         </view>
</view>
</template>

2、跳转到文章详情页

点击跳转到play /play.vue详情页,使用跳转uni.navigateTo(OBJECT) 接口

uni.navigateTo({
url: '../play/play?id='+id
})
<script>
         export default {
                   data() {
                            return {
                                     homeData: []
                            }
                   },
                   onLoad() {
                     this.getVod()
                   },
                   methods: {
                            // 详情页
                            play(id){
                                     uni.navigateTo({
                                               url: '../play/play?id='+id
                                     })
                            }
                   }
         }
</script>

3、文章详情页接收id,并且传递给后端去查询改id详情数据

<script>
         export default {
                   data() {
                            return {
                                     id: '' //定义id参数,默认为空
                            }
                   },
                   onLoad(option) {
                            this.id = option.id
                   },
                   methods: {
                            async getDetail(id){
                                     var that =this
                                     const res = await this.$myRequest({
                                               url: '/api/Uniapp/getdetail?id='+id+'&p='+that.p
                                     })
                                     that.detail = res.data.data
                                     uni.setNavigationBarTitle({
                                         title:  res.data.data.vod_name
                                     });
                            }
                   }
         }
</script>


【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/570.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×