详解uniapp页面跳转URL传参大坑

案例

展示电影详情,传递电影的id.从search.vue传递到movie.vue

methods: {
	showMovie(e){
		var trailerid = e.currentTarget.dataset.trailerid;
		// console.log(trailerid);
		uni.navigateTo({
			url: '../movie/movie?trailerId='+trailerid,
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
}

search.vue全部文件

<template>
	<view class="page">
		<view class="search-block">
			<view class="search-ico-wrapper">
				<image src="../../static/icos/search.png" class="search-ico"></image>
			</view>
			<input type="text" value="" placeholder="请输入电影名称" maxlength="10" class="search-text" confirm-type="search" @confirm="searchMe" />
		</view>
		<view class="movie-list page-block">
			<view v-for="movie in resultList" :key="movie.id" class="movie-wrapper">
				<image
					:src="movie.cover"
					:data-trailerId="movie.id"
					@click="showMovie"
					class="poster"></image>
			</view>
			<!-- <view class="movie-wrapper">
				<image src="../../static/poster/civilwar.jpg" class="poster"></image>
			</view> -->
		</view>
		<view class="bottom-tip" v-if="show">
			亲,已经到底了!
		</view>
	</view>
</template>

<script>
	import {DataMixin} from "../../common/DataMixin.js"
	export default {
		mixins:[DataMixin],
		data() {
			return {
				keyWords: '',
				show: false,
				resultList: []
			}
		},
		onLoad() {
			this.resultList = this.list;
		},
		onPullDownRefresh(e) {
			uni.showLoading({
				mask: true
			});
			uni.showNavigationBarLoading();
			this.resultList = this.list;
			this.show = false;
			this.queryByKeyWords();
			uni.stopPullDownRefresh();
			uni.hideLoading();
			uni.hideNavigationBarLoading();
		},
		onReachBottom() {
			uni.showLoading({
				mask: true
			});
			uni.showNavigationBarLoading();
			this.resultList = [...this.list, ...this.appendList];
			this.show = true;
			uni.stopPullDownRefresh();
			uni.hideLoading();
			uni.hideNavigationBarLoading();
		},
		methods: {
			showMovie(e){
				var trailerid = e.currentTarget.dataset.trailerid;
				uni.navigateTo({
					url: `../movie/movie?trailerId=${trailerid}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			queryByKeyWords(){
				var tempList = [...this.list, ...this.appendList];
				this.resultList = [];
				if (this.keyWords) {
					tempList.forEach(movie => {
						if (movie.name.indexOf(this.keyWords) != -1) {
							this.resultList.push(movie)
						}
					})
				} else {
					this.resultList = this.list;
				}
			},
			searchMe(e) {
				this.show = false;
				var value = e.detail.value;
				this.keyWords = value;
				this.queryByKeyWords();
			}
		}
	}
</script>

<style>
	@import url("search.css");
</style>

movie接收参数

<template>
	<view class="page">
		<!-- 视频播放start -->
		<view class="player"><video :src="movieSingle.trailer" :poster="movieSingle.poster" class="movie" controls></video></view>
		<!-- 视频播放end -->
		<!-- 影片基本信息start -->
		<view class="movie-info">
			<image :src="movieSingle.cover" class="cover"></image>
			<view class="movie-desc">
				<view class="title">{{ movieSingle.name }}</view>
				<view class="basic-info">{{ movieSingle.basicInfo }}</view>
				<view class="basic-info">{{ movieSingle.originalName }}</view>
				<view class="basic-info">{{ movieSingle.totalTime }}</view>
				<view class="basic-info">{{ movieSingle.releaseDate }}</view>
				<view class="score-block">
					<view class="big-score">
						<view class="score-words">综合评分:</view>
						<view class="movie-score">{{ movieSingle.score }}</view>
					</view>
					<view class="score-stars">
						<block v-if="movieSingle.score >= 0"><trailer-stars :innerScore="movieSingle.score" showNum="0"></trailer-stars></block>
						<view class="prise-counts">{{ movieSingle.priseCounts }}点赞</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 影片基本信息end -->
	</view>
</template>

<script>
import trailerStars from '../../components/trailerStars/trailerStars.vue';
import { DataMixin } from '../../common/DataMixin.js';
export default {
	name: '',
	mixins: [DataMixin],
	components: {
		trailerStars
	},
	data() {
		return {
			movieSingle: {},
			trailerId: ''
		};
	},
	onLoad(params) {
		this.trailerId = params.trailerId;
		var tempList = [...this.list, ...this.appendList];
		tempList.forEach(movie => {
			if (movie.id == this.trailerId) {
				this.movieSingle = movie;
			}
		});
	},
	methods: {}
};
</script>

<style>
@import url('movie.css');
</style>

详解

1.因为引入了组件trailerStars,此组件依赖onLoad接收的trailerId,然后去查询获取movie的详情.
2.此时trailerStars组件已经加载完毕,但是movie详情还没获取,就会产生movie.score为undefined的情况,此时需要处理

处理

首先只有movieSingle.socre >= 0时才加载组件

<block v-if="movieSingle.socre >= 0"><trailer-stars :innerScore="movieSingle.socre" showNum="0"></trailer-stars></block>

同时,trailerStars加载的时候需要放在mounted中加载

<template>
	<view class="movie-score-wrapper">
		<image v-for="yellow in yelloScore" src="../../static/icos/star-yellow.png" class="star-ico"></image>
		<image v-for="gray in grayScore" src="../../static/icos/star-gray.png" class="star-ico"></image>
		<view class="movie-score" v-if="showNum==1">{{innerScore}}</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "trailerStars",
		props: {
			innerScore: 0, //外部传入的分数
			showNum: 0, //是否显示,1显示,0不显示
		},
		data() {
			return {
				yelloScore: 0,
				grayScore: 0,
			}
		},
		mounted() {
			console.log("this.innerScore=" + this.innerScore)
			var tempScore = 0;
			if (this.innerScore != null && this.innerScore != undefined && this.innerScore != '') {
				tempScore = this.innerScore;
			}

			var yelloScore = parseInt(tempScore / 2);
			var grayScore = 5 - yelloScore;

			this.yelloScore = yelloScore;
			this.grayScore = grayScore;
		}
	}
</script>

<style>
	.movie-score-wrapper {
		display: flex;
		flex-direction: row;
	}

	.star-ico {
		width: 20rpx;
		height: 20rpx;
		margin-top: 6rpx;
	}

	.movie-score {
		font-size: 12px;
		color: #808080;
		margin-left: 8rpx;
	}
</style>

到此这篇关于详解uniapp页面跳转URL传参大坑的文章就介绍到这了,更多相关uniapp URL传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！