带你学习如何更好的使用uni-app（二）

一、添加登录的加载动画

1、在onLoad()中写showLoading()方法，因为使用的是uni-app框架，所以要用uni.什么来引用方法

uni.showLoading({
                title:'加载中....'
            });

2、加载完成后要在request方法中写complete()方法，在complete()方法中调用hideLoading()方法

uni.request({
    url: '',//填地址，请求发送的地址
    success(result) {//成功后执行
     
    },
    fail(error) {//失败时执行
     
    },
    complete() {//不论加载成功还是失败都会执行
     uni.hideLoading();//隐藏登录动画
    }
   });

二、触底加载

1、在页面中使用onReachBottom()方法
例如：

onReachBottom() {//触底加载
 console.log("进入onReachBottom")
  var _vue = this;
  var tempArticleList = this.articleList;
  var length = tempArticleList.length;
  for (var i = 0; i < length; i++) {
   this.articleList.push(tempArticleList[i]);
  }
 },

2、在pages.json里面设置"onReachBottomDistance"，设置举例底部多少时触发加载

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  {
   "path": "pages/index/index",
   "style":{
    "onReachBottomDistance":300   //默认像素是px
   }
  }
    ],

三、上拉刷新

1、在页面中使用onPullDownRefresh()方法，一般是在方法中把onLoad()中的方法重写一遍。
2、在pages.json里面设置"enablePullDownRefresh"为true

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  {
   "path": "pages/index/index",
   "style":{
    "enablePullDownRefresh":true
   }
  }
    ],

四、跳转

例如：新闻元素节点绑定事件，点击之后页面跳转并传值到新闻详情，到了新闻详情页面之后。重新发请求获取具体新闻信息，并使用rich-text解析到页面中。

1、在要跳转的前端代码加 @tap="#方法名"
2、在methods中写方法
例如：

<view @tap="navTo" :data-postid="item.post_id" v-for="(item, index) in articleList" :key="index" class="cu-card case" :class="isCard ? 'no-card' : ''">
	//这里写foreach循环内容
</view>

下面在methods中写navTo方法

navTo: function(event){
   console.log("進入navTo")
   var postid = event.currentTarget.dataset.postid;
   uni.navigateTo({//跳转
    url: 'new-detail/new-detail?postid=' + postid
   });
  }

3、在跳转到的页面写接收
例如：

<view>
  <view class="root-view" > <rich-text :nodes="artical.content"></rich-text> </view>
 </view>

onLoad(data) {
   var _vue = this;
   uni.showLoading({
    title:'加载中....'
   });
   
   uni.request({
    url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + data.postid,
    success(result) {
     console.log(result.data);
     _vue.artical = result.data;
    },
    fail(error) {
     console.log(error);
    },
    complete() {
     uni.hideLoading();
    }
   });
  }

五、底部导航栏（colorui的导航栏是自带的，切换除第一次外不用等待，graceui导航栏相当于自定义的，每次点击都相当于再次刷新）

1、在pages.json里面的"tabBar":{“list”:[] }写
2、“pagePath”，页面路径，哪个页面要有导航栏
3、“iconPath”，点击前标志
4、“selectedIconPath”，点击后标志
5、“text”，按钮的名字

"tabBar":{//框架自帶底部導航欄
  "list":[
   {
    "pagePath":"pages/index/index",
    "iconPath":"static/tabbar/component.png",
    "selectedIconPath":"static/tabbar/component_cur.png",
    "text":"首頁"
    
   },
   {
    "pagePath":"pages/user/user",
    "iconPath":"static/tabbar/about.png",
    "selectedIconPath":"static/tabbar/about_cur.png",
    "text":"个人中心"
    }
  ]
 }