初始化（包含登录模块）
This commit is contained in:
137
pages/API/subnvue/subnvue.vue
Normal file
137
pages/API/subnvue/subnvue.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<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>
|
||||
103
pages/API/subnvue/subnvue/drawer.nvue
Normal file
103
pages/API/subnvue/subnvue/drawer.nvue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<text class="nav-text">左侧列表</text>
|
||||
<list class="list-wrapper">
|
||||
<cell v-for="item in lists" :key="item.id">
|
||||
<div class="text-wrapper" @click="clickitem(item.id)">
|
||||
<text style="font-size: 30rpx; ">{{item.name}}</text>
|
||||
<text class="icon"></text>
|
||||
</div>
|
||||
</cell>
|
||||
</list>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<div class="close-drawer" @click="hideDrawer">
|
||||
<text style="font-size: 34rpx; text-align: center;">关闭抽屉</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
const domModule = weex.requireModule('dom')
|
||||
domModule.addRule('fontFace', {
|
||||
fontFamily: "unibtn",
|
||||
'src': "url('../../../../static/uni.ttf')"
|
||||
});
|
||||
},
|
||||
created() {
|
||||
for(let i = 0; i < 5; i++){
|
||||
this.lists.push({
|
||||
id: i,
|
||||
name: 'Item' + i,
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideDrawer() {
|
||||
uni.getCurrentSubNVue().hide('auto')
|
||||
},
|
||||
clickitem(e) {
|
||||
uni.$emit('drawer-page', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 60rpx 0rpx 0rpx 20rpx;
|
||||
background-color: #F4F5F6;
|
||||
}
|
||||
.nav-text {
|
||||
color: #8f8f94;
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
margin-bottom: 40px;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
margin-bottom: 40rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.list-wrapper {
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
height: 450rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
height: 450px;
|
||||
/* #endif */
|
||||
}
|
||||
.text-wrapper {
|
||||
justify-content: center;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-color: rgba(0,0,0,.2);
|
||||
margin-bottom: 35rpx;
|
||||
padding-bottom: 15rpx;
|
||||
}
|
||||
.close-drawer {
|
||||
background-color: #f8f8f8;
|
||||
width: 300rpx;
|
||||
padding: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
border-style: solid;
|
||||
border-width: 1rpx;
|
||||
border-color: rgba(0,0,0,.2);
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
color: #000000;
|
||||
font-family: unibtn;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
121
pages/API/subnvue/subnvue/popup.nvue
Normal file
121
pages/API/subnvue/subnvue/popup.nvue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<text class="title">{{title}}</text>
|
||||
<scroller class="scroller">
|
||||
<div>
|
||||
<text class="content">{{content}}</text>
|
||||
</div>
|
||||
<div>
|
||||
<text style="color: red; font-size: 30rpx;">以下为 Popup 内部滚动示例：</text>
|
||||
</div>
|
||||
<div class="cell" v-for="(item, index) in lists" @click="handle(item)" :key="index">
|
||||
<text class="text">{{item}}</text>
|
||||
</div>
|
||||
</scroller>
|
||||
<div class="message-wrapper">
|
||||
<text class="send-message" @click="sendMessage">向页面发送消息</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
content: '',
|
||||
lists: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const vm = this;
|
||||
for (let i = 1; i < 20; i++) {
|
||||
this.lists.push('item' + i);
|
||||
}
|
||||
uni.$on('page-popup', (data) => {
|
||||
vm.title = data.title;
|
||||
vm.content = data.content;
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('drawer-page')
|
||||
},
|
||||
methods: {
|
||||
sendMessage() {
|
||||
const subNVue = uni.getCurrentSubNVue()
|
||||
uni.$emit('popup-page', {
|
||||
title: '已读完!',
|
||||
})
|
||||
},
|
||||
handle(item, index) {
|
||||
const subNVue = uni.getCurrentSubNVue()
|
||||
uni.$emit('popup-page', {
|
||||
type: 'interactive',
|
||||
info: item + ' 该元素被点击了!',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 15rpx;
|
||||
background-color: #F4F5F6;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-color: #CBCBCB;
|
||||
flex: 0;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
height: 400rpx;
|
||||
padding: 8rpx 15rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #555555;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.message-wrapper {
|
||||
flex: 0;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1rpx;
|
||||
border-top-color: #CBCBCB;
|
||||
height: 80rpx;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.send-message {
|
||||
font-size: 30rpx;
|
||||
line-height: 80rpx;
|
||||
color: #00CE47;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin: 10rpx;
|
||||
padding: 20rpx 0;
|
||||
top: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
background-color: #5989B9;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
114
pages/API/subnvue/subnvue/video-mask.nvue
Normal file
114
pages/API/subnvue/subnvue/video-mask.nvue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<list class="list">
|
||||
<cell v-for="(item, index) in lists" :key="index" :ref="'item' + index" class="cell">
|
||||
<text class="name">{{item.name}}:</text>
|
||||
<text class="content">{{item.content}}</text>
|
||||
</cell>
|
||||
</list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
interval: null,
|
||||
yourTexts: [
|
||||
{
|
||||
name: '学员A',
|
||||
content: '老师讲的真好',
|
||||
}, {
|
||||
name: '学员B',
|
||||
content: 'uni-app值得学习',
|
||||
}, {
|
||||
name: '学员C',
|
||||
content: '老师，还有实战例子吗？',
|
||||
}, {
|
||||
name: '学员D',
|
||||
content: '老师，请问是不是要先学会vue才能学uni-app？',
|
||||
}, {
|
||||
name: '学员E',
|
||||
content: '受教了，uni-app太牛了',
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const vm = this;
|
||||
uni.$on('play-video', (data) => {
|
||||
if(data.status === 'open'){
|
||||
this.addItem();
|
||||
}else{
|
||||
this.closeItem();
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy(){
|
||||
uni.$off('play-video')
|
||||
this.closeItem()
|
||||
},
|
||||
methods: {
|
||||
addItem() {
|
||||
const vm = this;
|
||||
vm.lists = [{
|
||||
name: '学员E',
|
||||
content: '受教了，uni-app太牛了',
|
||||
}];
|
||||
const dom = weex.requireModule('dom')
|
||||
vm.interval = setInterval(() => {
|
||||
if(vm.lists.length > 15) {
|
||||
vm.lists.unshift();
|
||||
}
|
||||
vm.lists.push({
|
||||
name: vm.yourTexts[vm.lists.length%4].name,
|
||||
content: vm.yourTexts[vm.lists.length%4].content
|
||||
});
|
||||
if(vm.lists.length > 5) {
|
||||
vm.$nextTick(() => {
|
||||
if(vm.$refs['item' + (vm.lists.length - 1)]){
|
||||
dom.scrollToElement(vm.$refs['item' + (vm.lists.length - 1)][0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 3500);
|
||||
},
|
||||
closeItem() {
|
||||
if(this.interval) clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.cell {
|
||||
padding: 10rpx 0;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.name {
|
||||
flex: 0;
|
||||
font-size: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #FF5A5F;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
font-size: 20rpx;
|
||||
color: #F4F5F6;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user