一、下拉刷新

1.开启下拉刷新

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

• 需要在

  pages.json

  里，找到的当前页面的pages节点，并在

  style

  选项中开启

  enablePullDownRefresh

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

（1）通过配置文件开启

创建list页面进行演示

<template><view>杭州学科<view v-for=\"(item,index) in arr\" :key=\"index\">{{item}}</view></view></template><script>export default {data () {return {arr: [\'前端\',\'java\',\'ui\',\'大数据\']}}}</script><style></style>

通过pages.json文件中找到当前页面的pages节点，并在

style

选项中开启

enablePullDownRefresh

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

（2）通过API开启

api文档

uni.startPullDownRefresh()

2.监听下拉刷新

通过

onPullDownRefresh

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

export default {data () {return {arr: [\'前端\',\'java\',\'ui\',\'大数据\']}},methods: {startPull () {uni.startPullDownRefresh()}},onPullDownRefresh () {console.log(\'触发下拉刷新了\')}}

3.关闭下拉刷新

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: [\'前端\',\'java\',\'ui\',\'大数据\']}},methods: {startPull () {uni.startPullDownRefresh()}},onPullDownRefresh () {this.arr = []setTimeout(()=> {this.arr = [\'前端\',\'java\',\'ui\',\'大数据\']uni.stopPullDownRefresh()}, 1000);}}</script>

二、上拉加载

通过在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: [\'前端\',\'java\',\'ui\',\'大数据\',\'前端\',\'java\',\'ui\',\'大数据\']}},onReachBottom () {console.log(\'触底了\')}}</script><style>view{height: 100px;line-height: 100px;}</style>

三、网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送get请求

<template><view><button @click=\"sendGet\">发送请求</button></view></template><script>export default {methods: {sendGet () {uni.request({url: \'http://localhost:8082/api/getlunbo\',success(res) {console.log(res)}})}}}</script>

发送post请求

对请求进行封装

// 对uni.request()进行二次封装const BASE_URL = \'http://localhost:8082\'export const myRequest = (options) => {// 异步处理的封装一般使用promise封装return new Promise((resolve,reject) => {uni.request({url:BASE_URL+options.url,method:options.method||\'GET\',data:options.data || {},success: (res)=>{if (res.data.status !== 0) {return uni.showToast({title: \'获取数据失败！\'})}// 请求成功resolve(res)},fail: (err) => {uni.showToast({title: \'获取数据失败！\'})reject(err)}})})}

四、数据缓存

uni.setStorage

官方文档

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

代码演示

<template><view><button type=\"primary\" @click=\"setStor\">存储数据</button></view></template><script>export default {methods: {setStor () {uni.setStorage({key: \'id\',data: 100,success () {console.log(\'存储成功\')}})}}}</script><style></style>

uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

代码演示

<template><view><button type=\"primary\" @click=\"setStor\">存储数据</button></view></template><script>export default {methods: {setStor () {uni.setStorageSync(\'id\',100)}}}</script><style></style>

区别：

• 当你后面的操作必须依赖于修改storage后的数据，也就是说你后面的操作是基于修改storage成功后的，那就需要使用同步，也就是setStorageSync，不然后面操作执行时，使用的还是没有更新的数据。
• 当你后面的操作并不需要用到修改的storage数据，那就不需要立即同步，这时就可以选择使用异步，也就是setStorage ，因为操作内存是需要时间的，往往没有代码走的快。

uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

代码演示

<template><view><button type=\"primary\" @click=\"getStorage\">获取数据</button></view></template><script>export default {data () {return {id: \'\'}},methods: {getStorage () {uni.getStorage({key: \'id\',success:  res=>{this.id = res.data}})}}}</script>

uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

代码演示

<template><view><button type=\"primary\" @click=\"getStorage\">获取数据</button></view></template><script>export default {methods: {getStorage () {const id = uni.getStorageSync(\'id\')console.log(id)}}}</script>

uni.removeStorage

从本地缓存中异步移除指定 key。

代码演示

<template><view><button type=\"primary\" @click=\"removeStorage\">删除数据</button></view></template><script>export default {methods: {removeStorage () {uni.removeStorage({key: \'id\',success: function () {console.log(\'删除成功\')}})}}}</script>

uni.removeStorageSync

从本地缓存中同步移除指定 key。

代码演示

<template><view><button type=\"primary\" @click=\"removeStorage\">删除数据</button></view></template><script>export default {methods: {removeStorage () {uni.removeStorageSync(\'id\')}}}</script>

占坑：uni-app基础知识学习
【1】全局配置和页面配置
【2】组件的基本使用+样式
【3】数据绑定+事件+生命周期
【4】下拉刷新+上拉加载+网络请求
【5】上传图片、预览图片+跨域兼容+导航跳转
【6】组件的创建+组件通讯+uni-ui使用