微信翻译助手小程序 day4 -翻译历史页

学习目标

主要完成学习目标：
（1）通过Storage缓存API，实现数据的存储操作，完成翻译历史页的实现

任务3.1 翻译历史页实现
任务描述
完成如下图所示效果展示：

任务实施
1.为翻译历史页添加页面渲染
1.1 为历史列表页的视图层添加页面渲染，打开history.wxml文件，添加如下代码：

<view class='container'>
  <text class='history-title {{state}}'>翻译历史</text>

  <scroll-view scroll-y class='history-result-list'>
    <view class='history-result'
      wx:for='{{history}}'
      wx:for-item='historyItem'
      wx:key='index'
      bindtap='onTapReLaunch'
      data-query='{{historyItem.query}}'
    >
      <view class='orign-text'>{{historyItem.query}}</view>
      <view class='tanslate-text'>{{historyItem.result}}</view>
    </view> 
  </scroll-view>
</view>

1.2 为页面添加样式文件，打开打开history.wxss文件，添加如下代码:

/* history.wxss */
view.container {
  padding: 40rpx 0;
  display: flex;
  height: 100vh;
}
.history-title {
  font-size: 26rpx;
  line-height: 38rpx;
  color: #8995a1;
  position: fixed;
  top: 0; left: 0;
  padding: 40rpx;
  overflow: hidden;
  width: 100%;
  z-index: 999;
  transition: all 0.3s;
}
.history-title.stiky {
  background-color: white;
}
scroll-view.history-result-list {
  margin-top: 50rpx;
  background-color: #f5fafe;
}
view.history-result {
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
}
view.history-result:last-child {
  margin-bottom: 40rpx;
}
.orign-text {
  color: #8995a1;
  padding: 0 40rpx;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tanslate-text {
  margin-top: 16rpx;
  padding: 0 40rpx;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

2.为翻译历史页面添加业务逻辑代码
2.1 打开history.js文件，添加页面数据绑定变量，在data对象下添加如下代码：

history: [],
    state: ''

2.2 在生命周期函数中获取缓存中的历史数据，在onShow函数中添加如下代码：

this.setData({
      history: wx.getStorageSync('history')
    })
    let history = this.data.history
    if (history && history.length > 0) {
      this.setData({
        state: 'stiky'
      })
    } else {
      this.setData({
        state: ''
      })
    }

2.3 为列表页面数据添加列表onTapReLaunch单击事件，实现数据的传递，返回到翻译功能页面，实现历史数据的重新查询，添加如下代码 ：

onTapReLaunch: function (e) {
    console.log('data-set', e.currentTarget.dataset)
    let url = `/pages/index/index?query=${e.currentTarget.dataset.query}`
    wx.reLaunch({
      url
    })
  }