uni-app入门学习，一个三非渣本的前端校招秋招之路

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

<button @click=“tapHandle”>点我啊

事件函数定义在methods中

methods: {

tapHandle () {

console.log(‘真的点我了’)

}

}

(2)事件传参

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

// template

<button @click=“tapHandle”>点我啊

// script

methods: {

tapHandle (e) {

console.log(e)

}

}

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

// template

<button @click=“tapHandle(1)”>点我啊

// script

methods: {

tapHandle (num) {

console.log(num)

}

}

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

// template

<button @click=“tapHandle(1,$event)”>点我啊

// script

methods: {

tapHandle (num,e) {

console.log(num,e)

}

}

7.uni的生命周期

(1)应用的生命周期

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

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

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

| 函数名 | 说明 |

| — | — |

| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |

| onShow | 当 uni-app 启动，或从后台进入前台显示 |

| onHide | 当 uni-app 从前台进入后台 |

| onError | 当 uni-app 报错时触发 |

(2)页面的生命周期

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

| 函数名 | 说明 | 平台差异说明 | 最低版本 |

| — | — | — | — |

| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 | | |

| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | | |

| onReady | 监听页面初次渲染完成。 | | |

| onHide | 监听页面隐藏 | | |

| onUnload | 监听页面卸载 | | |

8.下拉刷新

开启下拉刷新

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

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

杭州学科

{ {item}}

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

{

“path”:“pages/list/list”,

“style”:{

“enablePullDownRefresh”: true

}

}

通过API开启

api文档

uni.st