微信小程序：声明式导航、刷新节流

声明式导航

navigator 标签可以实现页面跳转。

<!-- 语法格式 -->
<navigator url="页面路径" open-type="跳转方式"></navigator>

通过 Js 方式跳转页面

1. 跳转到普通页面

   wx.navigateTo({
       url: '页面路径',
       success: {
           
       }
   })
   

2. 跳转到 tabBar 页面

   wx.navigateTo({
       url: '页面路径'
   })
   

3. 回退页面

   delta 表示回退几个页面。

   wx.navigateBack({
       delta: 1,
   })
   

导航传参

• 参数传递

  1. 在标签上跳转传递

     <navigator url="/pages/message/message?参数名=值">
     

  2. 在js中跳转传参

     wx.navigateTo({
         url: 'pages/message/message?参数1=值&参数2=值'
     })
     

• 参数接收

  在跳转后的页面的 onLoad 生命周期内，使用 options 参数接收。

  Page({
      data() {
          query: {}
      },
      onLoad(options) {
          this.setData({
              this.query = options
          })
      }
  })
  

页面导航标题

wx.setNavigationBarTitle 可以动态设置当前页面的导航标题。

• 父页面

  <block wx:for="{{gridList}}" wx:key="id">
      <!-- 1.传递页面标题 -->
      <navigator class="grid-item" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
          <image src="{{item.icon}}"></image>
          <text>{{item.name}}</text>
      </navigator>
  </block>
  

• 子页面

  Page({
      data: {
          query: {}
      },
      // 生命周期函数--监听页面加载
      onLoad(options) {
          // 2.接收父页面传递过来的参数
          this.setData({ query: options })
      },
      // 生命周期函数--监听页面初次渲染完成
      onReady () {
          // 3.动态设置当前页面的标题
          wx.setNavigationBarTitle({
              title: this.data.query.title
          })
      }
  })
  

下拉刷新

*.json 文件中的 enablePullDownRefresh 用于开启页面下拉刷新。

1. 一般会关闭全局的下拉刷新，在需要使用的页面打开局部下拉刷新。

   /* app.json */
   {
       "window": {
           "enablePullDownRefresh": false
       }
   }
   

2. 在页面的 json 文件中打开下拉刷新

   /* pages/home/home.json */
   {
       "enablePullDownRefresh": true
   }
   

3. 在页面的 .js 文件中的 onPullDownRefresh 函数中做下拉刷新的业务处理。

   {
       // 页面相关事件处理函数--监听用户下拉动作
       onPullDownRefresh () {
           // 业务逻辑
           ...
           // 停止下拉刷新
           wx.stopPullDownRefresh()
       },
   }
   

   • 模拟商品列表下拉刷新

     Page({
         // 页面相关事件处理函数--监听用户下拉动作
         onPullDownRefresh() {
             // 清空已经加载的数据
             this.setData({
                 shopList: [],
                 page: 1
             })
             // 重新获取第一页数据
             this.getShopData()
         },
     })
     

上拉触底加载

在页面的 .js 中配置上拉加载事件的业务逻辑。

Page({
    // 页面上拉触底事件的处理函数
    onReachBottom() {
        ...
    }
})

• 模拟商品列表上拉触底，加载更多数据。

  /* pages/shoplist/shoplist.js */
  Page({
      data: {
          shopList: [],	// 商品列表
          page: 1,		// 页数
          pageSize: 10	// 每页多少条数据
      },
  
      // 获取商品列表   
      async getShopData() {
          const { data:res } = await wx.p.request({
              url: `https://applet-base-api-t.itheima.net/categories/1/shops`,
              method: "GET",
              data: {
                  // 页数和每页显示多少条数据
                  _page: this.data.page,
                  _pageSize: this.data.pageSize
              },
          })
          this.setData({
              // 新数据添加到原数据后面
              shopList: [...this.data.shopList, ...res]
          })
      },
  
      // 页面相关事件处理函数--监听用户下拉动作
      onPullDownRefresh () {
          this.setData({ shopList: [] })
          this.getShopData()
  
          // 停止下拉刷新
          wx.stopPullDownRefresh()
      },
  
      // 页面上拉触底事件的处理函数
      onReachBottom() {
          // 上拉触底，页数+1
          this.setData({
              page: this.data.page + 1
          })
          // 加载更多数据
          this.getShopData()
      },
  })
  

加载节流

原理是在 data 中定义 isloading 参数，默认为 false，

在请求接口开始前，设置 isloading 为 true，接口请求完毕后 设置为 false。

Page({
    data: {
        // 商品列表
        shopList: [],
        // 节流阀
        isLoading: false,
    },
    
	// 获取商品列表方法
    getShopList() {
        // 1.展示loading效果
        wx.showLoading({
            title: '数据加载中···'
        })
        // 2.开启节流阀
        this.setData({
            isLoading: true
        })
        // 3.发起网络请求，请求商品列表数据
        wx.request({
            url: 'https://www.escook.cn/api/color',
            method: 'GET',
            success: ({ data:res }) => {
                this.setData({
                    shopList: [...this.data.shopList, ...res]
                })
            },
            // 物流成功失败都调用complete方法
            complete: () => {
                // 4.隐藏loading效果
               	wx.hideLoading()
                // 5.关闭节流阀
                this.setData({
                    isLoading: false
                })
            }
        })
    },
    
    // 页面上拉触底事件的处理函数
    onReachBottom() {
        // 6.如果节流阀开启，则不继续请求接口
        if (this.data.isLoading) return
        this.getShopList()
    }
})