uni-app小小学习

电影小程序

<template>
    <view class="index">
        <view class="search" @tap="toSearch">
            <text class="iconfont icon-sousuo"></text>
            <text>搜索电影、电视、综艺等</text>
        </view>
        <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item>
                <image src="../../static/banner1.jpg" mode=""></image>
            </swiper-item>
            <swiper-item>
                <image src="../../static/banner2.jpg" mode=""></image>
            </swiper-item>
            <swiper-item>
                <image src="../../static/banner3.jpg" mode=""></image>
            </swiper-item>
        </swiper>
        <!-- 跳转到搜索页 -->
        <!-- <navigator open-type="navigate" url="/pages/search/search">跳转</navigator> -->
        <!-- api方式进行跳转 -->
        <!-- <button @click="toSearch">跳转到搜索页面</button>
        <button @click="toMy">跳转到我的页面</button> -->
        <h2>电影</h2>
        <view class="movies">
            <view class="movie" @tap="toDetail(item.id)" v-for="(item,index) in list" :key="index">
                <image :src="item.imgUrl" mode=""></image>
                <text>{{item.title}}</text>
            </view>
        </view>

    </view>
    <!-- </view> -->
</template>

<script>
    import movie from "../../common/js/movies.js"
    export default {
        data() {
            return {
                list: []
            }
        },
        onLoad() {
            this.list = movie;
        },
        methods: {
            toSearch(){
                uni.navigateTo({
                    url:"/pages/search/search"
                })
            },
            // toMy(){
            //     uni.switchTab({
            //         url:"/pages/my/my"
            //     })
            // }
            toDetail(id){
                uni.navigateTo({
                    url:"/pages/movie-detail/movie-detail?id="+id
                })
            }
        }
    }
</script>

<style>
    .search {
        background-color: #F2F2F2;
        height: 75rpx;
        line-height: 75rpx;
        border-radius: 10px;
        margin: 20rpx 30rpx;
    }

    .search .iconfont {
        margin: 0 8px;
    }

    .banner {
        height: 200px;
    }

    .banner image {
        width: 100%;
        height: 100%;
    }
    .movies{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
     h2{
         margin:10rpx 0 10rpx 20rpx;
        color: #429d05;
    }
    .movie{
        display: flex;
        flex-direction: column;
        width: 32%;
        align-items: center;
    }
    .movie image{
        width: 100%;
    }
</style>

通过遍历实现首页

接下来是详情页

<template>
    <view class="detail">
        <view class="bg" :style="'background-image: url('+detail.imgUrl+')'">
        </view>
        <view class="big-box">
            <image :src="detail.imgUrl" mode=""></image>
            <view class="information">
                <text>{{detail.title}}</text>
                <text>{{detail.years}}/{{detail.area}}</text>
                <text>{{detail.actor}}</text>
            </view>
            
            <!-- 剧情简介 -->
            <view class="introduce">
                <view class="title">
                    剧情简介:
                </view>
                <view class="desc">
                    <text v-if="isShowAll">{{detail.desc}}</text>
                    <text v-else>{{detail.desc.substr(0,85)}}...</text>
                    <text v-if="isShowAll" @tap="isShowAll=false">收起</text>
                    <text v-else @tap="isShowAll=true">展开</text>
                </view>
            </view>
            <view class="source">
                <view class="title">
                    播放源：
                </view>
                <view class="list">
                    <view @tap="toVideo(item.Url)" class="item" v-for="(item,index) in detail.sources" :key="index">
                            <text>{{item.Name}}</text>
                            <text class="iconfont icon-sousuo" ></text>
                        
                    </view>
                    
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import movie from "../../common/js/movies.js"
    export default {
        data() {
            return {
                id:"",
                detail:null,
                isShowAll:false
            }
        },
        onLoad(option){
            console.log(option)
            this.id=option.id;
            this.getDetail()
        },
        methods: {
            getDetail(){
                movie.filter(item=>{
                    if(item.id==this.id){
                        this.detail=item;
                        console.log(item);
                    }
                });
            },
            toVideo(url){
            uni.navigateTo({
                url:"/pages/movie-detail/video?path="+url
            })
        }
        }
        
    }
</script>

<style lang="scss">
    .detail {
        .bg{
            background-repeat: no-repeat;
            background-size: 100% 100%;
            filter: blur(10px);
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        .big-box {
            color: white;
            position: relative;
        }
        .big-box .information{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }
        .big-box .introduce{
            margin: 0 40rpx;
        }
        .big-box image{
            height: 580rpx;
            width: 380rpx;
            margin: 20rpx 200rpx;
        }
        .introduce .title{
            font-size: 22px;
            color: #000000;
            margin: 20rpx 0;
        }
        .source{
            margin: 10px;
            .title{
                font-weight: bold;
                font-size: 40rpx;
                color: #df834e;
            }
            .list{
                .item{
                    background-color: #ffffff;
                    color: #464646;
                    display: flex;
                    justify-content: space-between;
                    padding: 20px;
                }
            }
        }

    }
</style>