一、下拉刷新
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开启
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使用