138 lines
3.0 KiB
Vue
138 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<page-head :title="title"></page-head>
|
|||
|
|
<view class="example">
|
|||
|
|
<view class="example-title">从左侧滑出</view>
|
|||
|
|
<button @click="showDrawer">显示抽屉</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="example">
|
|||
|
|
<view class="example-title">从上侧竖向滑出</view>
|
|||
|
|
<button @click="showPopup">显示 弹出层</button>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 100%;">
|
|||
|
|
<video v-if="showVideo" id="video"
|
|||
|
|
@play="playVideo"
|
|||
|
|
@pause="closeMask"
|
|||
|
|
:controls="false"
|
|||
|
|
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
|
|||
|
|
@error="videoErrorCallback" poster="https://web-assets.dcloud.net.cn/unidoc/zh/poster.png"></video>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: 'SubNvue',
|
|||
|
|
showVideo: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.closeMask();
|
|||
|
|
|
|||
|
|
// 接收 popup 的消息
|
|||
|
|
uni.$on('popup-page', (data) => {
|
|||
|
|
switch(data.type){
|
|||
|
|
case 'interactive':
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '来自Popup的消息',
|
|||
|
|
content: data.info
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
uni.showToast({
|
|||
|
|
title: data.title,
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 监听 drawer 消息
|
|||
|
|
uni.$on('drawer-page', (data) => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '点击了第' + data + '项',
|
|||
|
|
icon:"none"
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
uni.$off('popup-page')
|
|||
|
|
uni.$off('drawer-page')
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.showVideo = true
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
showDrawer() {
|
|||
|
|
uni.getSubNVueById('drawer').show('slide-in-left', 200);
|
|||
|
|
},
|
|||
|
|
showPopup() {
|
|||
|
|
// 向 popup 传递消息
|
|||
|
|
uni.$emit('page-popup', {
|
|||
|
|
title: '请阅读软件内容',
|
|||
|
|
content: 'uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。'
|
|||
|
|
});
|
|||
|
|
const subNVue = uni.getSubNVueById('popup')
|
|||
|
|
subNVue.show('slide-in-top', 250)
|
|||
|
|
},
|
|||
|
|
videoErrorCallback: function() {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '视频加载失败',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
playVideo() {
|
|||
|
|
let subNVue = uni.getSubNVueById('video_mask')
|
|||
|
|
subNVue.show('fade-in', 200, () => {
|
|||
|
|
uni.$emit('play-video', {
|
|||
|
|
status: 'open',
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
closeMask() {
|
|||
|
|
let subNVue = uni.getSubNVueById('video_mask')
|
|||
|
|
uni.$emit('close-video', {
|
|||
|
|
status: 'close',
|
|||
|
|
})
|
|||
|
|
subNVue.hide('fade-out', 200)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.content {
|
|||
|
|
align-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #F4F5F6;
|
|||
|
|
}
|
|||
|
|
.example {
|
|||
|
|
padding: 0 10px 10px
|
|||
|
|
}
|
|||
|
|
.example-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 14px;
|
|||
|
|
color: #777;
|
|||
|
|
margin: 40px 2rpx;
|
|||
|
|
position: relative
|
|||
|
|
}
|
|||
|
|
video {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 30px;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
.example .example-title {
|
|||
|
|
margin: 40rpx 0
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #8f8f94;
|
|||
|
|
}
|
|||
|
|
</style>
|