循环的话,怎样按顺序展示出来呢

来源:20-15 星星评分组件的实现

慕函数2132411

2019-01-15

WXML

<import src="movie-lists/movie-list-template.wxml" />
<view class='container'>
  <block wx:for="{{readyData}}" wx:key="index" wx:for-item="item">
    <view class="movies-template">
      <template is="movieListTemplate" data="{{item}}" />
    </view>
  </block>
  <!-- <view class="movies-template">
    <template is="movieListTemplate" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" />
  </view> -->
</view>

JS

Page({

  data: {
    readyData: {}
  },

  onLoad: function (options) {
    let inTheatersUrl = app.globalData.g_doubanBase + '/v2/movie/in_theaters' + '?start=0&count=3';
    let comingSoonUrl = app.globalData.g_doubanBase + '/v2/movie/coming_soon' + '?start=0&count=3';
    let top250Url = app.globalData.g_doubanBase + '/v2/movie/top250'+ '?start=0&count=3';
    this.getMovieListData(inTheatersUrl, 'inTheaters', '正在热映');
    this.getMovieListData(top250Url, 'top250', '豆瓣Top250');
    this.getMovieListData(comingSoonUrl, 'comingSoon', '即将上映');
    
  },
  //跳转更多页面
  onMoreTap: function (event) {
    let category = event.currentTarget.dataset.category;
    movieLists.onMoreTap(category);
  },
  
  //request获取豆瓣API
  getMovieListData: function (url, settedKey, categoryTitle) {
    const _this = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        _this.processDoubanData(res.data, settedKey, categoryTitle);
        // console.log(res.data)
      },
      fail: function (error) {
        console.log(error)
      }
    })
  },
  //填充到页面数据中
  processDoubanData: function (doubanMovie, settedKey, categoryTitle) {
    let movies = [];
    for (let idx in doubanMovie.subjects) {
      let subject = doubanMovie.subjects[idx];
      let title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0,6) + '...';
      };
      let temp = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      };
      movies.push(temp)
    };
    let readingData = {};
    let readyData = {};
    readyData[settedKey] = {
      movies: movies,
      categoryTitle: categoryTitle
    };
    if (Object.keys(this.data.readyData).length === 0) {
      readingData = readyData;
    }
    else {
      readingData = Object.assign(this.data.readyData, readyData)
    };
    this.setData({
      readyData: readingData
    })
    console.log(readingData)
  }
})

!图片描述
图片描述
老师,电影页面我是循环出来的,怎样才能按顺序加载出来。

谢谢老师!

写回答

1回答

慕函数2132411

提问者

2019-01-15

就想到一个办法  回调函数然后设置定时器。。这样可行吗。。还有没有别的方法。

0
6
慕函数2132411
回复
7七月
额。。可是只要刷新页面重新执行getMovieListData三个组件的内容顺序就会改变,不知道怎么搞定。。。
2019-01-15
共6条回复

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23962 学习 · 6930 问题

查看课程