Uniapp小知识笔记集合 [持续更新中]

①箭头函数和非箭头函数的区别
[以success为例讲解] success：成功返回的回调函数
this的作用域
箭头函数：
可以直接this点出data内的数据

	success:(res)=>{
		this.datainfo = 123;
	}

非箭头函数：
this得在success外面定义好，才可以点出data内的数据

	var me = this;
	success:function(){
		me.datainfo = 123;
	}

②变量定义的两种方式

	var name = "徽蝶";
	let age = 21 ;

③数据绑定的两种方式
源码：

	<text>{{name}}</text>
	<input :value="name"/>

效果：

④如何获取接口文档的全路径
1.按F12
2.点击“发送”请求数据
3.点“network”中“list”看“Headers”的Request Url

⑤路径前@符号的含义
当前项目的根目录

uniapp内，全局变量的定义
⑥常量的定义和使用
常量使用实例
1.创建js文件，定义常量，导出常量
2.vue文件内，导入js文件
3.获取常量使用

⑦数据挂载，挂载后可通过this直接点出数据
1.main.js文件，挂载数据
2.编写挂载内容
3.在vue文件使用挂载内容
main.js文件

	vue.prototype.url = "这是公用数据"；

vue.js文件

	var info = this.url;

⑧组件是什么意思
组件=>标签; 可以这么理解
自定义组件=>自定义标签

⑨v-if和v-for不建议一起使用的原因
v-for的优先级比v-if大，一起使用，会出现不必要的循环

⑩< template >标签内使用data里的数据，不需要用this点
< template >标签本身有this的意思

⑪v-if和v-show的区别
v-if值为false时，内容会被移除，不再占页面位置；
而v-show值为false时，内容不会被移除；

小程序界面的刷新功能、加载小图标的显示
⑫小程序界面下拉刷新功能
pages.josn内

	{
		"path": "pages/lianxi/lianxi",
		"style": {
			// 开启某个界面的下拉刷新功能
			"enablePullDownRefresh": true
		}
	}

lianxi.vue文件内（码在数据刷新后的后面）

	complete: ()=> {
		// 停止当前界面的下拉刷新
		uni.stopPullDownRefersh();
	}

⑬开启数据刷新时，加载的loding图标
.vue文件内（码在数据刷新前）

	// 数据刷新时，开启加载的loding图标
	uni.showloading({
		mask: true, // 开启界面隔板功能 阻止用户透过loding触发界面内容
		title: "请稍等" // loding图标的提示文字
	})；

.vue文件内（码在数据刷新后的后面）

	complete: ()=> {
		// 停止loding图标
		uni.hideLoading();
	}

⑭开启原生导航栏数据刷新时，加载的loding图标
.vue文件内（码在数据刷新前）

	// 数据刷新时，开启原生导航栏加载的loding图标
	uni.showNavigationBarLoading()；

.vue文件内（码在数据刷新后的后面）

	complete: ()=> {
		// 停止loding图标
		uni.hideNavigationBarLoading();
	}

⑮导入css样式文件
前提得有样式文件，且需要导入.vue文件内

	<style>
		// lianxi.css为样式文件 可以借助../找到对应文件路径
		@import url("lianxi.css");
	</style>

⑯一进入界面，input输入框便获得焦点
为input标签，加上focus属性即可

	<input type="text" focus/>

⑰弹窗，有确定和取消按钮
例子：点击“删除”；弹出有确定和取消按钮的窗口；点击“确认”触发成功提示

源码：

	uni.showModal({
		title: '提示',
		content: '确认删除该地址?',
		success(res) {
			if(res.confirm){
				uni.showToast({
					title: "删除成功!",
					icon:"success",
					duration: 2000 // 提示的延迟时间 毫秒为单位
				})
			}
		}
	})

效果：

⑱原生导航栏的禁用
源码：

	{
		"path": "pages/order/OrderDetails/index",
		"style": {
			"navigationBarTitleText": "订单详情"
			"navigationStyle":"custom" // 原生导航栏的禁用 
		}
	}

效果: 禁用前、禁用后

⑲⑳

温馨提示：
喜欢灰碟分享的小伙伴不要忘记关注噢~这样子，想找我时就不会迷路啦*

联系方式：
Vx+：LHD7575