微信小程序列表进入详情返回定位与数据更新！$$ 需求场景 $$ 领导：列表分页之后进入详情返回刷新问题需要处理一下！打

需求场景

领导：列表分页之后进入详情返回刷新问题需要处理一下！
打工人：这个需要处理很多东西的，数据更新，单条数据权限！
领导：你直接缓存，然后定位，然后记录...中间省略亿大堆...最后，这个很多简单的，你处理一下！
打工人：...
既然领导都说很好实现了，咱们咋也不得给他实现呀，加油打工人...

进入正题

业务分析

列表具有分页数据，一直可以加载很多的数据，点击其中一条进入详情。
列表单条数据具有已读状态，置顶/取消置顶，负责人等相关功能
数据可以直接新增/编辑
从详情返回的是要看到自己修改的数据及时展现，并且不刷新数据，保持当前点击位置
最主要是的是这个列表页面是tabbar主页

业务实现

都知道小程序非常便利，因为它提供了很多的API可以实现，大家可能最先想到的就是直接使用onLoad生命周期实现，这样是可以很不错的，但是忽略了数据更新的处理

打工人的实现方案就是采用以下生命周期与API实现，在需要数据更新的地方进行缓存设置与更新

onLoad 微信小程序生命周期内只执行一次
onShow 微信小程序生命周期内只要页面展现一次就执行一次
onPullDownRefresh 微信小程序下拉页面刷新获取最新数据
wx.setStorageSync()同步设置缓存
wx.getStorageSync()同步获取缓存
wx.removeStorageSync()同步移除缓存

代码实现

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageNum: 1, // 因为有分页
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取页面基础数据
    this.getPageData()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      // 进入详情后。详情返回需要更新的数据
      let tmp = wx.getStorageSync('DETAIL_INFO') || {}
      // 没有详情返回数据停止
      if (!tmp) {
        return false
      }
      // 获取详情返回的数据
      let { list } = this.data
  
      // 遍历更新数据
      for (let i = 0; i < list.length; i++) {
        if (detailInfo.id == list[i].book.id) {
          // ... doSomting
        }
      }
  
      this.setData({
        list
      }, () => {
        // 用完清除
        wx.removeStorageSync('DETAIL_INFO')
      })
  },

  // 下拉刷新
  onPullDownRefresh: function() {
    this.setData({
      pageNum: 1
    }, () => {
      this.getPageData()
    })
  },

  // 点击单条数据跳转
  handleNavToDetail() {
    wx.navigateTo({
      url: 'detail',
    })
  },
  
   /**
   * 监听底部tabbar双击事件
   * 200ms内算是双击
   * 双击刷新列表
   */
  onTabItemTap() {
    if (this.tabClick) {
      this.setData({
        pageNum: 1
      }, () => {
        this.getPageData()
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 300
        })
      })
    }
    this.tabClick = true
    setTimeout(() => {
      this.tabClick = false // 200ms 内没有第二次点击，就当作单击
    }, 200)
  },

  // 获取接口取数据
  getPageData() {
    this.setData({
      list: []
    })
  }
})

在更新数据成功之后需要返回上级页面的时候，进行数据缓存
handleSureBtn() {
    // ....一些其他的逻辑
    // data: 需要缓存的更新数据
    wx.setStorageSync('DETAIL_INFO', data)
}

写在最后

第一次写文章，写的不是太好，后续还得继续努力💪！