Uni-app 学习笔记

H5访问页面跳转：

直接在浏览器输入页面如： http://localhost:5174/#/pages/request/request

小程序访问页面跳转 pages.json中：

 "condition": { //模式配置，仅开发期间生效"current": 0, //当前激活的模式（list 的索引项）"list": [{"name": "请求页面", //模式名称"path": "pages/request/request", //启动页面，必选//"query": "id=4000&name=zs" //启动参数，在页面的onLoad函数里面得到。}]}

下拉刷新：

API:onPullDownRefresh | uni-app官网 (dcloud.net.cn)

<template><view><view class="">下拉刷新Demo</view><view v-for="(item,index) in list" :key="index">{{item}}</view><button type="default" @click="onPull">下拉刷新</button></view>
</template><script>  export default {  data() {  return {  list: ["java", 'php', "Ai", "大数据"]  }  }, onPullDownRefresh() {  console.log("触发了下拉事件")  //设置停止  setTimeout(() => {  //修改数据  this.list = ["大数据1", "java1", "php1", "Ai1"]  //停止下拉刷新  uni.stopPullDownRefresh()  }, 2000)  },methods: {  //方法2 触发下拉刷新  onPull() {  console.log("通过按钮点击事件，触发下拉事件")  uni.startPullDownRefresh()  //设置停止  延迟2秒setTimeout(() => {  //修改数据  this.list = ["大数据2", "java2", "php2", "Ai2"]  //停止下拉刷新  uni.stopPullDownRefresh()  }, 1000)  }  }  }  
</script><style></style>

上拉加载

页面 | uni-app官网 (dcloud.net.cn)

<template><view><view class="">下拉刷新Demo</view><view  class="box-item" v-for="(item,index) in list" :key="index">{{item}}</view><button type="default" @click="onPull">下拉刷新</button></view>
</template><script>  export default {  data() {  return {  list: ["java", 'php', "Ai", "大数据","java", 'php', "Ai", "大数据","java", 'php', "Ai", "大数据"]  }  },/* onPullDownRefresh() {  console.log("触发了下拉事件")  //设置停止  setTimeout(() => {  //修改数据  this.list = ["大数据1", "java1", "php1", "Ai1"]  //停止下拉刷新  uni.stopPullDownRefresh()  }, 2000)  },*///上拉滑动到底部默认距离50px 触发//可在pages.json里定义具体页面底部的触发距离onReachBottomDistanceonReachBottom(){console.log("触发了快到底部了 默认50px onReachBottom事件")  //数组扩容this.list=[...this.list,...["新数据1","新数据2","滴滴..."]]}, methods: {  //方法2 触发下拉刷新  onPull() {  console.log("通过按钮点击事件，触发下拉事件")  uni.startPullDownRefresh()  //设置停止  延迟2秒setTimeout(() => {  //修改数据  this.list = ["大数据2", "java2", "php2", "Ai2"]  //停止下拉刷新  uni.stopPullDownRefresh()  }, 1000)  }  }  }  
</script><style>
.box-item{height: 200rpx;
}
</style>