---

电影列表页面布局

itemview重构

分析：首页和更多页面的布局基本一样，所以我们可以将首页布局代码拿过来直接用

(我们在代码的时候发现有些东西是重复的，我们可以将代码单独抽取出来，然后再哪个地方需要使用的时候再引用，这样相当于对代码进行了重构，方便后期对代码进行管理)

1. 首页代码在indexmodul组件中，所以我们去该组价中再进行代码优化

2. 在components中新建一个itemview组件

3. 将indexmodule.wxml中的代码剪切到itemview.wxml中

navigator也可以拿过去，因为后期我们点击一个电影也会跳转到详情页面中

4. 将样式代码页抽取到itemview.wxss中

 .item-navigator{
  width:200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.item-navigator  .item-group{
  width: 100px;
}
.item-group .thumbnail-group{
  width: 100%;
  height: 284rpx;
}
.thumbnail-group .thumbnail{
  width: 100px;
  height: 100%;
}
.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  /* 文本过长处理 */
  text-overflow:ellipsis;
  overflow: hidden;
}

5. 展示items，应该要传一个items属性过来

解决： 在itemsview.js文件中

6. 注册组件

7. 使用组件

8. 问题

右边距没有了

解决：我们把itemview单独放在一个当中使用了，所以item-navigator只有一个则last-of-type就是它本身
将该代码删除就可以了

9. 此时星星组件不见了，将星星组件放到itemview.json文件中使用

以上操作方便了我们后期布局

创建列表页

1. 创建列表页面

在app.json中添加该行代码保存就会自动创建页面

2. 分析：电影，电视剧，综艺三个列表页面都是相同的样式，唯独不一样的是数据，所以我们完全没有必要为这三个弄三个单独的页面。我们完全可以使用同一个页面，后期我们传不同的参数过去，告诉它我现在要获取电影，电视剧，综艺.这样可以达到重用。

3. 列表页入口

应该有一个入口可以来到列表页–更多

在首页添加url

4. 列表页搜索栏
   列表页也应该有搜索栏,将之前的searchbar组件拿过来使用

注册list.json

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar"
  }
}

使用 list.wxml

<searchbar  isnavigator="{{true}}"></searchbar>

这时候列表页出现了搜索栏

5. 电影排列–flex布局

<view class="container">
  <itemview  wx:for="{{items}}"  wx:key="{{item.title}}"  item="{{item}}"></itemview>
</view>

由于.container在app.wxss中存在，这里我们将app.wxss代码删除掉

6. 电影数据获取

在list.js的onLoad函数中调用电影列表数据

• 导入network.js

import {network}  from  "../../utils/network.js";

• 请求数据

  onLoad: function (options) {
      var  that= this;
            // 请求的电影数据
        network.getMovieList({
          success:function(items){
            that.setData({
              items: items
            });    
          }}

• css样式

.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30rpx;
}

列表数据渲染成真实数据

1. 分析：电影，电视剧，综艺用的都是list页面中的，这时候我们要怎么去区分它呢？

我们可以在首页index中传一个参数过去，当点击更多的时候，我们list页面得到这个参数就可以根据参数发送不同的请求

传递参数

list.js中接收参数

2. 怎么能够获取所有正在热映的电影，电视剧，综艺？

分析：我们在首页中就已经写过网络请求的代码，不过我们写的count=7,我们现在要获取所有的数据，之前的代码也可以重用。

 wx.request({
   //  豆瓣电影接口
    url: globalurls.movieList,
    data:{
      count:count
     },
    success:function(res){
     // console.log(res)
      var   movies = res.data.subjects;
       if(params && params.success){
         params.success(movies)
       }
    }
})

解决：将network.js文件进行重构
我们network.js 文件在list文件中也用的到，所以放在全局文件中比较合适，可以放在utils中。网络请求代码不是很多，所以我们这里放在一个文件中是可以的。

3. 在utils中新建一个network.js文件

将原来的network.js文件代码拷贝过来，原来文件可以删除了

此时将所有相关引用路径更改

network.js代码

import  {globalurls}  from "urls.js"

const  network={
  
getMovieList:function(params){
params.type= "movie";
this.getItemList(params);
},
getTVList:function(params){
    params.type= "tv";
    this.getItemList(params);
     } ,
getShowList: function(params){
    params.type= "show";
    this.getItemList(params);
},


// 获取item列表 params获取传递参数type
getItemList:function(params){
  // 获取不同url
  var  url="";
  if(params.type === "movie"){
    url= globalurls.movieList;
  }else  if(params.type==="tv"){
    url = globalurls.tvList;
  }else{
    url= globalurls.showList;
  }
  var count = params.count ? params.count : 7;
  wx.request({
    //  豆瓣电影接口
     url: url,
     data:{
       count:count
     },
     success:function(res){
    // item代表所有的项
       var   items =res.data.subject_collection_items;
       var  itemsCount = items.length;
       var  left = itemsCount%3;
       if(left===2){
         items.push(null);
       }
       if(params && params.success){
        //  将items传出
        params.success( items)
      }
     },
 });
}
}

export  {network}

4. 在list.js中请求网络

修改引入路径
import {network} from “../../utils/network.js”;

list.js代码

onLoad: function (options) {
   var  that= this;
   var  type = options.type;
   var  title ="";
   // 数据加载前
   wx.showLoading({
     title: '正在加载中...',
   })
   if(type === "movie"){
     // 请求的电影数据
     network.getMovieList({
       success:function(items){
         that.setData({
           items: items
         });
         // 数据加载完成
           wx.hideLoading();
       },
       // 确保获取到所有数据
             count:1000
     })
    title= "电影"
   }else if(type=== "tv"){
     // 请求电视剧的数据
     network.getTVList({
       success:function(items){
         that.setData({
           items: items
         });
         wx.hideLoading();
       },
       count:1000
     });
     title = "电视剧"
   }else  {
     //请求综艺的数据
     network.getShowList({
       success:function(items){
         that.setData({
           items: items
         });
         wx.hideLoading();
       },
       count:1000
     });
     title="综艺";
   }
   wx.setNavigationBarTitle({
     title:title,
   })
 }

问题：发现页面不显示但是也没有报错，说明数据获取了但是没有渲染

问题：将原来的movies修改为items

5. 优化

当点击更多之后(电影，电视剧，综艺)三个上方均显示为豆瓣评分，这时候我们需要考虑到用户体验，将上面的数据进行修改。

解决：在list.js文件中

微信的函数设置

wx.setNavigationBarTitle({
  title:title,
})

函数上面定义一个title

var  title ="";

优化

1. 如果底部剩余两个item就会出现一下情况，因为是flex布局

2. 分析：

• 在主轴上的那布局排列总共有5中
• 1从左到右排列，最下面的可以但是上面的可能排列就不那么好看了，因为它的中间的间距你不好掌握
• 2中间间距相等的方式也不这么好，页面排列也不那么好看

什么时候会产生这个问题，就是底部余2个，余1余活3个都不会产生

解决：这时候我们要迎合flex布局方式，在数据渲染的时候判断数据对3取余是不是等于2

当然我们还要对index页面进行分析，因为index页面也调用了network.js,因为首页是得到了7个数据，对3取余为1，所以对network.js处理是不会对页面有影响的。

代码解决network.js

如果余2就添加一个空的数据

var  itemsCount = items.length;
var  left = itemsCount%3;
if(left===2){
  items.push(null);
}

新问题：出现一个未评分

解决：在itemview中判断是否传入值

3. 页面加载优化

数据加载需要时间，如果长时间没有加载出来，用户体验会不好，会损失用户。

处理：调用小程序Api实现，