学习小程序遇到的问题一

今天在学习小程序时遇到了一个自己走不出的死胡同，记录一下

我要实现的样式如下：

 html结构：

<view class="list">
  <view 
    class="list-item"
    wx:for="{{currentList}}"
    wx:key="title"
  >
    <image class="list-img" src="{{item.imgUrl}}" />
    <view class="list-title">
      <view class="list-title-inner">{{item.title}}</view> 
    </view>
    <view class="list-num">
      <image 
        class="list-num-img" src="../../resources/first.png" 
        wx:if="{{index === 0 }}"
      />
      <image 
        class="list-num-img" src="../../resources/second.png" 
        wx:elif="{{index === 1 }}"
      />
      <image 
        class="list-num-img" src="../../resources/third.png" 
        wx:elif="{{index === 2 }}"
      />
      <view wx:else class="list-num-commn">{{index+1}}</view>
    </view>
  </view>
</view>

js部分：

Page({
  listData:{},
  data: {
    rankType:project,
    rankTypes:[{
      title:'实战排行',
      type:'project'
    },{
      title:'路径排行',
      type:'path'
    }],
    rankPeriod:week,
    rankPeriods:[{
      title:'周',
      value:'week'
    },{
      title:'月',
      value:'month'
    }],
    currentList:[]

  },
  onLoad(){
    wx.request({
      url: 'https://www.fastmock.site/mock/f61155fb8fa5bb1bc6f1723d519546f1/weixin/api/getRecomend',
      success:(res) => {
        const {data:{data}} = res; 
        this.listData = data;
        this.setData({rankPeriod,rankType})
        const { rankType, rankPeriod } = this.data;
        
        this.changeCurrentList(rankType,rankPeriod);
      }
    })
  },
  changeCurrentList(rankType,rankPeriod){
    let currentList = [];
    if(rankType === 'project' && rankPeriod === 'week'){
      currentList = this.listData.projectWeek
    }else if(rankType === 'project' && rankPeriod === 'month'){
      currentList = this.listData.projectMonth
    }else if(rankType === 'path' && rankPeriod === 'week'){
      currentList = this.listData.pathWeek
    }else{
      currentList = this.listData.pathMonth
    }
    this.setData({currentList})
  },
  handleTabChange(e){
    const rankType = e.currentTarget.dataset.type
    const rankPeriod = this.data.rankPeriod
    this.setData({rankType})
    wx.setStorage({
      key:'rankType',
      data:rankType
    })
    this.changeCurrentList(rankType,rankPeriod)
  },
  handlePeriodChange(e){
    const rankPeriod = e.currentTarget.dataset.type
    const {rankType} = this.data
    this.setData({rankPeriod})
    wx.setStorage({
      key:'rankPeriod',
      data:rankPeriod
    })
    this.changeCurrentList(rankType,rankPeriod)
  }
})

原本想不明白为什么changeCurrentList方法可以设置currentList的默认值，后来发现其实currentList原本就有默认值，

hot页面的具体内容，是通过数据currentList渲染的：

 而currentList这个数据具体是什么，则是通过changeCurrentList这个方法从接口数据中筛选出来的：

 

 

 如下代码，则是从data中，获取rankType、periodType这两个参数：

 把它俩传入changeCurrentList方法，可以获取到具体的changeCurrentList。