Case
Show the movie details, pass the movie's id. From pass to
methods: {
showMovie(e){
var trailerid = ;
// (trailerid);
({
url: '../movie/movie?trailerId='+trailerid,
success: res => {},
fail: () => {},
complete: () => {}
});
}
}
All files
<template>
<view class="page">
<view class="search-block">
<view class="search-ico-wrapper">
<image src="../../static/icos/" class="search-ico"></image>
</view>
<input type="text" value="" placeholder="Please enter the movie name" maxlength="10" class="search-text" confirm-type="search" @confirm="searchMe" />
</view>
<view class="movie-list page-block">
<view v-for="movie in resultList" :key="" class="movie-wrapper">
<image
:src=""
:data-trailerId=""
@click="showMovie"
class="poster"></image>
</view>
<!-- <view class="movie-wrapper">
<image src="../../static/poster/" class="poster"></image>
</view> -->
</view>
<view class="bottom-tip" v-if="show">
relative,It's already the end!
</view>
</view>
</template>
<script>
import {DataMixin} from "../../common/"
export default {
mixins:[DataMixin],
data() {
return {
keyWords: '',
show: false,
resultList: []
}
},
onLoad() {
= ;
},
onPullDownRefresh(e) {
({
mask: true
});
();
= ;
= false;
();
();
();
();
},
onReachBottom() {
({
mask: true
});
();
= [..., ...];
= true;
();
();
();
},
methods: {
showMovie(e){
var trailerid = ;
({
url: `../movie/movie?trailerId=${trailerid}`,
success: res => {},
fail: () => {},
complete: () => {}
});
},
queryByKeyWords(){
var tempList = [..., ...];
= [];
if () {
(movie => {
if (() != -1) {
(movie)
}
})
} else {
= ;
}
},
searchMe(e) {
= false;
var value = ;
= value;
();
}
}
}
</script>
<style>
@import url("");
</style>
movie receive parameters
<template>
<view class="page">
<!-- Video playbackstart -->
<view class="player"><video :src="" :poster="" class="movie" controls></video></view>
<!-- Video playbackend -->
<!-- Basic information about the videostart -->
<view class="movie-info">
<image :src="" class="cover"></image>
<view class="movie-desc">
<view class="title">{{ }}</view>
<view class="basic-info">{{ }}</view>
<view class="basic-info">{{ }}</view>
<view class="basic-info">{{ }}</view>
<view class="basic-info">{{ }}</view>
<view class="score-block">
<view class="big-score">
<view class="score-words">Comprehensive rating:</view>
<view class="movie-score">{{ }}</view>
</view>
<view class="score-stars">
<block v-if=" >= 0"><trailer-stars :innerScore="" showNum="0"></trailer-stars></block>
<view class="prise-counts">{{ }}Like</view>
</view>
</view>
</view>
</view>
<!-- Basic information about the videoend -->
</view>
</template>
<script>
import trailerStars from '../../components/trailerStars/';
import { DataMixin } from '../../common/';
export default {
name: '',
mixins: [DataMixin],
components: {
trailerStars
},
data() {
return {
movieSingle: {},
trailerId: ''
};
},
onLoad(params) {
= ;
var tempList = [..., ...];
(movie => {
if ( == ) {
= movie;
}
});
},
methods: {}
};
</script>
<style>
@import url('');
</style>
Detailed explanation
1. Because the component trailerStars is introduced, this component relies on the trailerId received by onLoad, and then query to get the movie details.
2. At this time, the trailerStars component has been loaded, but the movie details have not been obtained, and it will be undefined. It needs to be processed at this time.
deal with
First, the component is loaded only when >= 0
<block v-if=" >= 0"><trailer-stars :innerScore="" showNum="0"></trailer-stars></block>
At the same time, the trailerStars needs to be loaded in mounted when loading
<template>
<view class="movie-score-wrapper">
<image v-for="yellow in yelloScore" src="../../static/icos/" class="star-ico"></image>
<image v-for="gray in grayScore" src="../../static/icos/" 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, //External incoming score showNum: 0, // Whether to display, 1 display, 0 does not display },
data() {
return {
yelloScore: 0,
grayScore: 0,
}
},
mounted() {
("=" + )
var tempScore = 0;
if ( != null && != undefined && != '') {
tempScore = ;
}
var yelloScore = parseInt(tempScore / 2);
var grayScore = 5 - yelloScore;
= yelloScore;
= 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>This is the article about detailed explanation of the URL transfer pit of uniapp page jumping to uniapp page. For more related content of uniapp URL transfer, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!