一些uni-app踩的坑和实用方法

1、在H5中,scroll-view的scroll-x和scroll-y属性、checkbox的checked属性,即使设置为false这个值,依然可以滑动或者选中,并不会禁止,只有不设置这些属性,才会禁止,如:

  • scroll-x=“false” //可以滑动
  • scroll-x=“true” //可以滑动
  • scroll-x=“123” //可以滑动
  • scroll-x=" " //可以滑动

其他同理。

解决方法: :scroll=“false” , 这样可以生效。

2、动态获取元素的高度

let info = uni.createSelectorQuery().select(".status_bar"); //获取某个元素
info.boundingClientRect(function(data) { //获取元素的宽高、position的偏移值、id、自定义的data属性
	console.log(data.width)  //获取元素的宽度
	//这里获取的距离页面顶部的距离,获取出来的不包括已经滚动消失的距离,实际是元素距离屏幕顶部的距离,解决方案,用ref获取:this.$refs.定义的ref.$el.offsetTop
}).exec()

3、获取系统信息
官网文档详细属性

//uni.getSystemInfo  获取系统信息,如:状态栏高度、手机型号、屏幕宽高等。
uni.getSystemInfo({
	success: function(res) {
		console.log(res);
	}
});

4、获取状态栏高度(只有在app下生效)

var lh = plus.navigator.getStatusbarHeight();
console.log('Statusbar Height: '+lh*plus.screen.scale);
//单位为像素(px),值为Webview中的逻辑高度单位,如果要获取真实高度则必须乘以plus.screen.scale。

5、调起手机打电话功能

uni.makePhoneCall({
    phoneNumber: '13535014139',  //需要拨打的电话
	success: (res)=>{
		this.tui.toast('打电话回调成功!')
	}
});

6、隐藏scroll-view滚动条

scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}

你可能感兴趣的:(一些uni-app踩的坑和实用方法)