nvue 页面只能使用 vue 的生命周期,uniapp 生命周期 api 支持部分,css 样式只支持 flex,很多 css 样式不支持
<template>
<div class="controls-top" ref="controlsTop">
<div class="title"><text class="text">{{title}}</text></div>
<div class="fanhui" @tap="back"><text class="ios-icon"></text></div>
<div class="top-right1">
<div class="power-view">
<div class="power-box">
<div class="power-header"></div>
<div class="power-body"><div class="power-level" :style="{ width: `${16 * level}px`, backgroundColor: '#fff' }"></div></div>
</div>
</div>
</div>
<div class="top-right2">
<text class="ios-sm-title">{{nowTime}}</text>
</div>
</div>
</template>
<script>
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
export default {
data() {
return {
level:0,
nowTime:"00:00",
title:'',
timer:null,
platform:null
}
},
beforeCreate() {
// #ifdef APP-PLUS-NVUE
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
fontFamily: 'texticons',
src: "url('../../../static/text-icon.ttf')"
});
// #endif
},
created(){
uni.getSystemInfo({
success: (e) => {
// #ifndef MP
this.platform = e.platform
// #endif
}
})
},
mounted() {
this.getLevel()
this.timer = setInterval(()=>{
this.nowTime = this.getNowTime()
},1000)
uni.$on("videoTitileShow",()=>{
this.nowTime = this.getNowTime()
this.animateControls(0,this.$refs.controlsTop)
})
uni.$on("videoTitileHide",()=>{
this.animateControls(-40,this.$refs.controlsTop)
})
uni.$on("videoTitileChange",(title)=>{
this.title = title
})
},
destroyed() {
uni.$off("videoTitileShow")
uni.$off("videoTitileHide")
uni.$off("videoTitileChange")
clearInterval(this.timer)
},
methods: {
getLevel(){
let promise = new Promise((resolve,reject)=>{
//#ifdef APP-PLUS-NVUE
if(this.platform == 'android'){
//注意,安卓需要配置下manifest.json文件,打开后,进入模块权限配置,在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
var main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass('android.content.Intent');
var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) {
var action = intent.getAction();
if (action == Intent.ACTION_BATTERY_CHANGED) {
let level = intent.getIntExtra("level", 0); //电量
var voltage = intent.getIntExtra("voltage", 0); //电池电压
var temperature = intent.getIntExtra("temperature", 0); //电池温度
resolve(level/100)
}
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
main.registerReceiver(recevier, filter);
}else if(this.platform == 'ios'){
var UIDevice = plus.ios.import("UIDevice");
var dev = UIDevice.currentDevice();
if (!dev.isBatteryMonitoringEnabled()) {
dev.setBatteryMonitoringEnabled(true);
}
let level =dev.batteryLevel();
resolve(level)
}
//#endif
//#ifdef MP-WEIXIN
wx.getBatteryInfo({
success: function(e) {
resolve(e.level)
}
})
//#endif
})
promise.then(res=>{
this.level = res
})
},
getNowTime(){
var now = new Date();
var hh = now.getHours(); //时
if(hh<10) hh = "0" + hh;
var mm = now.getMinutes(); //分
if(mm<10) mm = "0" + mm;
return `${hh}:${mm}`;
},
back(){
this.animateControls(-40,this.$refs.controlsTop)
uni.$emit("exitFullscreen")
},
animateControls(distance,el){
animation.transition(el, {
styles: {
transform: `translate(0px, ${distance}px)`,
},
duration: 350, //ms
timingFunction: 'ease',
delay: 0 //ms
}, () => {
}
)
}
}
};
</script>
<style>
.controls-top {
/* width: 750upx; */
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
position: relative;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
height: 40px;
transform: translateY(-40px);
align-items: center;
justify-content: space-between;
text-align: left;
padding: 0 40px 0 40px;
}
.ios-icon {
font-size: 18px;
color: #fff;
font-family: texticons;
}
.title {
/* width: 750upx; */
height: 40px;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
position: absolute;
left: 40px;
right: 80px;
top: 0px;
justify-content: center;
text-align: left;
align-items: flex-start;
/* background-color: #007aff; */
padding: 0 10px 0 10px;
}
.text {
color: #fff;
font-size: 14px;
}
.fanhui {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
justify-content: center;
align-items: center;
}
.top-right1 {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
align-items: center;
font-size: 12px;
color: #fff;
position: absolute;
top: 14px;
right: 2px;
width: 40px;
}
.top-right2 {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
align-items: center;
font-size: 12px;
color: #fff;
position: absolute;
top: 12px;
right:38px;
width: 40px;
}
.power-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
align-items: center;
}
.power-box {
flex-direction: row;
align-items: center;
}
.power-header {
height: 4px;
width: 2px;
background-color: #fff;
}
.power-body {
height: 9px;
width: 20px;
border-width: 1px;
border-color: #fff;
padding: 1px;
flex-direction: row;
justify-content: flex-end;
}
.power-level {
height: 5px;
}
.ios-sm-title{
font-size: 10px;
color: #fff;
}
</style>
pages.josn 配置 nvue
vue 页面里获取 nvue 组件,使用
this.videoTitleNvue = uni.getSubNVueById('title');
this.videoTitleNvue.setStyle({
top: 44 + uni.getSystemInfoSync().statusBarHeight + 'px',
left: '0px',
width: '100%',
height: '40px'
});
this.videoTitleNvue.show('auto', 0, function() {
// 打开后进行一些操作...
//
});
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于