0x00 路由API

wx.navigateTo(Obj)

wx.redirectTo(Obj)

wx.switchTab(Obj) 如果跳转到的页面带有Tab栏，那么就不能用以上两者来跳转

0x01 导航Tab栏

App.json中直接配置

 "tabBar": {"color":"#666","selectedColor":"#405f80","borderStyle":"white","list": [{"pagePath": "pages/posts/posts","text": "首页","iconPath":"/images/tab/yuedu.png","selectedIconPath":"/images/tab/yuedu_hl.png"},{"pagePath": "pages/posts/posts","text": "分类","iconPath":"/images/tab/ciwei.png","selectedIconPath":"/images/tab/ciwei_hl.png"},{"pagePath": "pages/movies/movies","text": "电影","iconPath":"/images/tab/dianying.png","selectedIconPath":"/images/tab/dianying_hl.png"}]}

0x02 发送请求

一般写在onLoad方法中

    wx.request({url: url,data: {},method: "GET",header: {"content-Type": "application/json"},success: function (res) {console.log(res);},fail: function () {//该fail代表发送请求 就没有发送成功，例如断网的情况下console.log("发送请求失败!");},complete: function () {}

关于使用template的一点心得：

编写template时，从小到大

给template数据传递的时候，从大到小

注意不要直接给template设置样式，这样做是无效的，建议用view将template包裹住，在view上面加样式

0x03 动态设置导航栏标题

    wx.setNavigationBarTitle({title: category,})

建议写在OnReady中，写在onLoad中也可以

0x04 实现上滑加载更多数据

scroll-view标签圈定一个可滚动视图区域。

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。

组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

<scroll-view scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower" class='grid-container'>
文章列表呀什么的</scroll-view>

bindscrolltolower 滚动到底部/右边时触发

onScrollLower函数用来发送ajax请求，请求新的数据

0x05 显示正在加载隐藏正在加载

显示正在加载：一般发送ajax请求的时候调用

    wx.showNavigationBarLoading({success: (res) => {},})

隐藏正在加载：一般完成数据绑定的时候调用

    wx.hideNavigationBarLoading({success: (res) => {},})

0x06 实现下拉刷新数据

注意在新版本中下拉刷新和 scroll-view 组件不能在一个页面中同时使用。

在页面的配置文件中添加：

  "enablePullDownRefresh":true

在js文件中：

  onPullDownRefresh:function(event){var refreshUrl = this.data.requestUrl +"?start=0&count=20";this.data.movies = {},this.data.isEmpty = true;util.http(refreshUrl,this.processDoubanData);wx.showNavigationBarLoading();},

微信小程序Day04 路由API 导航栏Tab 发送请求 上滑加载更多数据 正在加载 下拉刷新数据