异步返回请求数据导致盒子位置错乱问题

wx.request()请求，success中数据处理后得到一个数组，数组元素是对象[{},{},{}]。

this.getMoviesData(in_theaters)//理论顺序1
this.getMoviesData(coming_soon)//理论顺序2
this.getMoviesData(top250)//理论顺序3，然而并不一定

getMoviesData:function(url){
var that=this
wx.request({
url: url,
data: {},
method: 'GET',
header: { 'content-type': 'application/xml' },
success: function (res) {
that.processDoubanData(res.data)
},
fail: function () {
},
})
}
processDoubanData: function (movieData) {
var movies=[]
for(var index in movieData.subjects){
var subject = movieData.subjects[index]
var title = subject.title
if(title.length>6){
title=title.substring(0,6)+"..."
}
var temp={
title:title,
imageUrl: subject.images.large,
score: subject.rating.average,
movieId:subject.id
}
movies.push(temp)
}
if (movieData.title=="正在上映的电影-北京"){
movieData.title ="正在热映"
} else if (movieData.title == "即将上映的电影"){
movieData.title = "即将上映"
}else{
movieData.title = "口碑电影"
}
var list={
movies:movies,
header: movieData.title
}
app.globalData.movieList.push(list)
this.setData({
movieList: app.globalData.movieList
})
}

wxml

<view class='wraper' wx:for="{{movieList}}" wx:key="{{*this}}">
<view wx:if="{{item.header=='正在热映'}}" class='intheater'>
<template is="movieListTemplate" data="{{...item}}"/>
</view> 
<view wx:elif="{{item.header=='即将上映'}}" class='coming'>
<template is="movieListTemplate" data="{{...item}}" />
</view>
<view wx:else="{{item.header=='口碑电影'}}" class='good'>
<template is="movieListTemplate" data="{{...item}}"/>
</view> 
</view> 

一开始这么做的在wxss中，改变每个模板的order值。在前面的order最小。

.wraper{
margin-top:20rpx;
display: flex;
flex-direction: column;
}
.intheater{
order:-30;/*显示在最前*/
}
.coming{
order:-10;
}
.good{
order:10;
}

不好意思，这种方法后来发现并不行。

这次不骗人了

解决：简单粗暴的在js中，强制数组中下标=应该显示的数据顺序。
例如：正确显示的数据顺序，正在热映、即将上映、口碑电影。但是服务器返回的是，即将上映、口碑电影、正在热映。那么我arr[0]='正在热映'，arr[1]='即将上映'，arr[2]='口碑电影'
效果图：

this.getMoviesData(in_theaters)
    this.getMoviesData(coming_soon)
    this.getMoviesData(top250)

getMoviesData: function (url) {
    var that = this
    wx.request({
      url: url,
      data: {},
      method: 'GET',
      header: { 'content-type': 'application/xml' },
      success: function (res) {
        // console.log(res)
        that.processDoubanData(res.data)
      },
      fail: function () {
        console.log('fail')
      },
    })
  },

  processDoubanData: function (movieData) {
    var movies = []
    for (var index in movieData.subjects) {
      var subject = movieData.subjects[index]
      var title = subject.title
      if (title.length > 6) {
        title = title.substring(0, 6) + "..."
      }
      var temp = {
        title: title,
        imageUrl: subject.images.large,
        score: subject.rating.average,
        movieId: subject.id
      }
      movies.push(temp)
    }
    
    if (movieData.title == "正在上映的电影-北京") {
      this.setMovieTypeOrder("正在热映",0,movies)

    } else if (movieData.title == "即将上映的电影") {
      this.setMovieTypeOrder("即将上映", 1,  movies)

    } else {
      this.setMovieTypeOrder("口碑电影", 2, movies)

    }

    this.setData({
      movieList: app.globalData.movieList
    })
  },
  setMovieTypeOrder: function (str, num, movies) {
    var list = {
      movies: movies,
      header: str
    }
    app.globalData.movieList[num] = list
  }

现在顺序是正确了，但是控制台报错了

第一感觉是 app.globalData.movieList[num] = list有问题，然后把全局数组movieList进行了初始化，由原来的movieList: []，初始化成movieList: [1,2,3]，然后就好了。

欢迎批评指正，大家共同前进