04uniapp的使用

1.开启下拉刷新
-----1.全局的不推荐
-----2.局部pages.json

      "pages":[
	"style":{
		"enablePullDownRefresh":true

                  }

   ]

3.监听下拉刷新生命周期

  export default{
       data(){
return{
               list:['aa','bb']
          }
      },
   enablePullDownRefresh(){
//更新数据
          this.list=['bb','aa'];
         uni.stopPullDownRefresh();


   }
     
  }

2.另外一种点击按钮来触发下拉刷新

  methods:{
      pullDown(){
        uni.startPullDownRefresh();


   }



  }

3.滚动条到底部(常用)

   生命周期
   onReachBottom(){
   #数组拼接
   this.list=[...this.list,...['aa','bb']]

 }
   //离底部的距离
   //在pages.json的pages的style加上
    "onReachBottomDistance":300

4.发起请求
-----1.安装phpstudy
-----2.导入数据库,字符集为utf-8
-----3.到素材 cnpm i

node ./src/app.js  //打开服务

 如果数据库密码不同到app.js改密码

-----4.在methods写

    uni.request({
         url:"",
         success(res){
         
        }
   })

5. 向本地存储数据

uni.setStorage({
      key: 'id',
      data:80,
      success(){
        console.log("成功")

    }

  })

  //得到数据
  uni.getStorage({ //删除数据 removeStorage,也一样
      key:"id",
      success(res){
       //获取成功 res
   }
  })

  //推荐用同步的方便!!!
      uni.setStorageSync("id",100);
      const res=uni.getStorageSync("id");
      uni.removeStorageSync("id");

6.上传图片(本地相册或者相机拍照)

<image v-for="item in imgArr" :src="item" @click="pre(item)"></image>
 uni.chooseImage({
  count:5,//图片的数量,h5限制不了
  success:res=>{   //对象保存在数组中.箭头函数没有this指向本身数值
     this.imgArr =res.tempFilePaths;   //存进vue的data中
     //用for遍历
     
  }
 });
//预览图片的方法
 pre(current){
   uni.previewImage({
        current, //当前图片的路径
        urls:this.imgArr,   //全部图片的预览地址的设置
        loop:true,//是否可以滑动到底下一张为第一张,小程序和h5不能,app才可以
        indicator:"default"#预览有小点点在下面,与上同
    

  })


}

7.条件注释(实现跨端兼容)

<!--  #ifdef H5 -->
<view>在h5看见</view>
<!--  #endif -->
<!--  #ifdef MP-WEIXIN -->
<view>在微信看见</view>
<!--  #endif -->
//生命周期也可以
onLoad(){
  // #ifdef H5
    console.log("h5打印")
 // #endif
}
//样式也可以
 /* #ifdef */
  view{
     color:pink
   }
 /* #enddef */

8.导航跳转
#普通页面,有上一个页面的箭头

<navigator url="/pages/xxx"></navigator >
#跳转至tabbar特殊页面,与方法不一样
<navigator url="/pages/xxx"
   open-type="switchTab"
></navigator >
//open-type="redirect" ,没有箭头在页面显示,把前面的页面关闭了

9.通过事件来跳转

 <button @click="xxx()">xxx</button>
  methods:
  //普通页面
  uni.navigateTo({url:"pages/xxx"});  
  //跳转到tabbar页面,并关闭其他页面
  uni.switchTab({url:"pages/xxx"});
  //重定向
  uni.redirectTo({url:"xxx"});

10.如何传参(拿到上一个页面的数据)说明式和编程式一样
#拿到

onLoad(options){
}