案例

展示电影详情,传递电影的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传参大坑