【知识】Uni-app-学习笔记 03Uni-app学习笔记系列【知识】Uni-app-学习笔记 01 【知识】Uni

Uni-app学习笔记系列

持续更新中........

uni中的事件
导航跳转
组件创建和通讯及组件的生命周期

三、uni-app 高级语法

1、uniapp中的事件

事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {
  tapHandle () {
    console.log('真的点我了')
  }
}

事件传参

默认如果没有传递参数，事件函数第一个形参为事件对象。

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
  tapHandle (e) {
    console.log(e)
  }
}

如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据。

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
  tapHandle (num) {
    console.log(num)
  }
}

如果获取事件对象也想传递参数。

// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
  tapHandle (num,e) {
    console.log(num,e)
  }
}

2、uniapp的生命周期

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发

页面的生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

3、下拉刷新

开启下拉刷新

在uni-app中有两种方式开启下拉刷新

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

<template>
	<view>
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				arr: ['sunming','孙铭','孙不坚1208']
			}
		}
	}
</script>

<style>
</style>

通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}

通过API开启

api文档

uni.startPullDownRefresh()

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {
  data () {
    return {
      arr: ['sunming','孙铭','孙不坚1208']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
  }
}

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['sunming','孙铭','孙不坚1208']
			}
		},
		methods: {
			startPull () {
				uni.startPullDownRefresh()
			}
		},		
		onPullDownRefresh () {
			this.arr = []
			setTimeout(()=> {
				this.arr = ['sunming','孙不坚1208','孙铭']
				uni.stopPullDownRefresh() //关闭上拉刷新
			}, 1000);
		}
	}
</script>

4、上拉加载

通过在pages.json 文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px。

通过onReachBottom监听到触底的行为

<template> 
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['sunming','孙不坚1208','孙铭']
			}
		},
		onReachBottom () {
			console.log('触底了')
		}
	}
</script>

<style>
	view{
		height: 100px;
		line-height: 100px;
	}
</style>