UniApp 知识点 第二天

1.获取元素信息

元素信息参考:

uniapp.dcloud.net.cn/api/ui/node…

设备信息参考：

uniapp.dcloud.net.cn/api/system/…

使用场景

一般用于滑动视图需要占用屏幕剩下的空间,这时候可以通过获取元素信息

屏幕可用高度 - 元素 bottom 坐标 来确定剩余的空间

<video-play :standardUrl="videoUrl" id="video"></video-play>

uni.getSystemInfo({
    success: res => {
        this.scrollViewHeight = res.windowHeight;
        //类为.class id为#id
        //this.$nextTick这个方法作用是，当数据被修改后使用这个方法，
        //会回调获取更新后的dom再渲染出来
        this.$nextTick(() => {
	    this.getDomHeight("#video");
	});		
    }
});

getDomHeight(e){
        //以下是获取元素信息
	uni.createSelectorQuery().in(this).select(e).boundingClientRect(data => {
	    console.log(JSON.stringify(data))
	    // {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
	    //50是留给底部导航的空间
            this.scrollViewHeight = this.scrollViewHeight - data.bottom - 50; 
	}).exec()
}

2.获取现在的路由(页面)

参考:uniapp.dcloud.net.cn/api/window/…

使用场景

未登录重定向

//返回数组 首页在数组的第一个 数组的最后一个是现在的页面
let pages = getCurrentPages();
let nowPage = pages[pages.length-1].route;
if (nowPage != "pages/login/login") {
	if(data.message == "登录超时已退出,请重新登录!"){
		vm.$store.commit('loginOut');
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
}