详解uniapp页面跳转URL传参大坑
作者：未月廿三
本文主要介绍了详解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传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！