Uni-app从入门到实战3天训练营 （三）

一、自定义弹窗组件

1.1实现播放的样式

index.vue

<!-- 认识uniapp -->
<view class="video">
	<view class="til">
		认识uniapp
	</view>
	<view class="video_box">
		<image src="http://www.zhufengpeixun.cn/skin/20142/img/zfBg2.jpg" mode="aspectFill"></image>
		<view class="play_icon"  @click="showPopup">
			<image src="http://www.zhufengpeixun.cn/skin/20142/img/video.png" mode=""></image>
		</view>
	</view>
</view>

	
.video {
	width: 90%;
	margin: 10px auto 20px;
	box-shadow: 0px 2px 13px 5px #ccc;
	background-color: #fff;
	text-align: center;

	.video_box {
		position: relative;

		image {
			width: 100%;
		}

		.play_icon {
			width: 80px;
			height: 80px;
			position: absolute;
			z-index: 10;
			left: 50%;
			top: 50%;
			margin: -40px auto auto -40px;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.til {
		font-size: 30px;
		margin-bottom: 20px;
		padding-top: 20px;
		text-align: center;
	}
}

1.2创建组件my-dialog
my-dialog.vue

<template>
	<view class="dialog_box">
		<view class="slot_box">
			<slot></slot>
		</view>
		<view class="mask">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	@keyframes opa {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.dialog_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 30;
		animation: opa 0.2s;

		.slot_box {
			background: #fff;
			width: 300px;
			margin: auto;
			top: 25%;
			position: relative;
			z-index: 20;
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
		}
	}
</style>

1.3点击播放按钮出现

index.vue

1.4点击蒙层消失

1.4.1代码

index.vue

父组件
<my-dialog v-show="isShowUppop"  @close="closePopup"></my-dialog>

closePopup(){
	this.isShowUppop = false;
}

my-dialog.vue

子组件
<view class="mask"  @click="fn"></view>

fn(){
	this.$emit('close');
}

1.4.2 $emit

二、uni-app三方ui组件的使用

官网-组件-拓展组件

index.vue

<uni-popup ref="popup" ></uni-popup>

showPopup2(){
	this.$refs.popup.open();
}

三、实现列表

效果如图：

3.1在index文件夹新加pub-class.vue文件
index.vue

<pub-class :list='pubClassList'></pub-class>

import pubClass from "./pub-class.vue";

export default {
	components: {
		"pub-class": pubClass
	},
	data() {
		return {
			pubClassList: []
		}
	},
	created() {
		this.getPubClass();
	},
	methods: {
		getPubClass() {
			uniCloud.callFunction({
				name: "getPubClass"
			}).then(res => {
				console.log(res);
				this.pubClassList = res.result.data;
			})
		}
	}
}

pub-class.vue

<template>
	<view class="pubClass">
		<view class="til">
			本周进行公开课
		</view>
		<view class="list_box">
			<view class="list_item" v-for="item in list" :key='item._id'>
				<image class="img" :src="item.img" mode=""></image>
				<text class='text'>{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="less">
	.pubClass{
		width: 90%;
		margin: 20px auto;
		.til{
			padding: 10px;
			font-size: 20px;
			background: #FFF;
		}
		.list_box{
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			justify-content: space-between;
			.list_item{
				background: #FFF;
				width: 49%;
				text-align: center;
				margin-bottom: 8px;
				box-shadow: 0px 2px 2px 0px #ccc;
				.img{
					width: 100%;
					height: 200px;
				}
				.text{
					display: block;
					margin: 10px 0;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
					padding: 5px;
					font-size: 16px;
				}
				
			}
		}
	}
</style>

四、web-view组件实现小程序与H5互跳

4.1新建页面pubinfo

<template>
	<view>
		<web-view :src="src"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:''
			}
		},
		onLoad(e) {
			console.log(e)
		},
	
	}
</script>

pub-class.vue

<view class="list_item" v-for="item in list" :key='item._id' @click='fn(item.url)'>
	<image class="img" :src="item.img" mode=""></image>
	<text class='text'>{{item.title}}</text>
</view>

fn(url){
	// url只是web-view  要展示的页面
	// #ifdef H5
		location.href = url
	//#endif
	
	// #ifndef H5
	uni.navigateTo({
		url:'/pages/pubinfo/pubinfo?src='+url
	})
	//#endif
	
	//另一种方法
	if(location){
	 	location.href = url
	 }else{
	 	uni.navigateTo({
	 		url:'/pages/pubinfo/pubinfo?src='+url
	 	})
	 }
}