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里定义具体页面底部的触发距离onReachBottomDistance
      onReachBottom(){
          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>

发送请求：

Api:        uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)</