三、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 支持如下应用生命周期函数：
页面的生命周期
uni-app 支持如下页面生命周期函数：
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开启
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>
