微信小程序仿豆瓣電影頁(yè)面demo（3）--獲取電影列表（自定義組件及傳值）


接著上文繼續(xù)~（上文地址：http://www.itdecent.cn/p/0eff6f592d53）
分析："正在熱映"和"即將上映"的電影列樣式基本一致，只是數(shù)據(jù)不一致，因此考慮以自定義組件的方式實(shí)現(xiàn)一個(gè)共同頁(yè)面，供二者使用。

自定義組件

  1. 創(chuàng)建components文件夾，創(chuàng)建新的頁(yè)面movieList，如下圖所示：


由于movieList是一個(gè)組件，需要在movieList.json中配置如下代碼：

{
  "component": true
}
  1. movieList組件是用于home頁(yè)面中的，在home.json中注冊(cè)這個(gè)組件，代碼如下：
{
  "usingComponents": {
    "movieList": "../../components/movieList/movieList"
  }
}
  1. 配置完以上之后就可以在home頁(yè)面調(diào)用了，home.wxml代碼如下：
 <view class="page">
  <view class="nav">
    <view class="{{homeSelected?'current':'default'}}" bindtap="handleHomeSelected">正在熱映</view>
    <view class="{{comingSelected?'current':'default'}}" bindtap="handleComingSelected">即將上映</view>
  </view>
  <view class="{{homeSelected?'show':'hidden'}}">
    <!-- 正在熱映 -->
     <movieList id="movieList" sendValue="{{movieType}}"></movieList> 
  </view>
  <view class="{{comingSelected?'show':'hidden'}}">
      <!-- 即將上映 -->
     <movieList id="movieComingList" sendValue="{{movieType}}"></movieList>   
  </view> 
</view>

id代表唯一標(biāo)志值，可以取到這個(gè)組件；value表示傳到movieList頁(yè)面的參數(shù)key，名稱(chēng)可以自定義

  1. 組件中的方法、屬性使用以及獲取傳遞過(guò)來(lái)的參數(shù)
Component({
  properties: {
    'sendValue':{ //與home.wxml中的key值對(duì)應(yīng)
      type: String, //必填，屬性類(lèi)型，包括：String, Number, Boolean, Object, Array, null（表示任意類(lèi)型）
      value: "" , //屬性初始值
      observer: function (newVal, oldVal) { //屬性值被更改時(shí)的響應(yīng)函數(shù)
         //...
      }
    }
  },
  data: {
    //...
  },
  methods: {
    //...
  }
})

獲取傳遞過(guò)來(lái)的參數(shù)：this.properties.sendValue

獲取電影列表

  1. 編輯movieList.wxml
 <view class="page">
  <block wx:if="{{showLoading}}">
      <view class="page-loading">
        <image class="loading-img" src="../../images/loading.gif" />
        <text>玩命加載中...</text>
      </view>
    </block>
  <block wx:else>
    <scroll-view style="height:1100px;" scroll-y="{{true}}" scroll-top="0" 
    bindscrolltolower="handleScrollToLower">
      <block wx:for="{{list}}" wx:key="{{index}}">
        <view class="list" data-id="{{item.id}}" bindtap="handleRedirect">
          <view class="left">
            <image src="{{item.images.large}}" />
          </view>
          <view class="middle">
            <view class="row row-title">
              {{item.original_title}}
            </view>
            <view class="row row-content">
              評(píng)分：{{item.rating.average}}
            </view>
            <view class="row row-content">
              導(dǎo)演：<view wx:for="{{item.directors}}" wx:for-item="directors" wx:key="{{index}}">
                {{directors.name}}
              </view>
            </view>
            <view class="row row-content">
              主演：<view wx:for="{{item.casts}}" wx:for-item="casts" wx:key="{{index}}">
                {{casts.name}} <text wx:if="{{index+1-item.casts.length < 0}}">/</text>
              </view>
            </view>  
          </view>
          <view class="right right-content">
            <text>{{item.reviews_count}}人看過(guò)</text>
            <button class="right-content-btn" bindtap="handleBuyTicket">購(gòu)票</button>   
          </view>
        </view>
      </block>
      
      <block wx:if="{{showMore}}">
        <view class="page-loading">
            <image class="loading-img" src="../../images/loading.gif" />
            <text>玩命加載中...</text>
          </view>
      </block>
      <block wx:else>
        <view class="page-loading">
           <text>沒(méi)有更多內(nèi)容了</text> 
        </view>
      </block>
    </scroll-view>
  </block>    
 </view>
  1. 編寫(xiě)樣式文件movieList.wxss

"正在熱映"和"即將上映"的樣式相同，創(chuàng)建一個(gè)styles文件夾，再創(chuàng)建公共樣式文件movieLayout.wxss，代碼如下：

.list{
  display:flex;
  border-bottom: 1px solid #dfdfdf;
}
.left{
  width:25%;
  margin-left:20rpx
}
.left image{
  width:100%;
  height:280rpx;
}
.middle{
  width:55%; 
  margin-right:20rpx 
}
.right{
  width:20%;
}
.left,.middle,.right{
  height:280rpx;
  margin-bottom:20rpx;
  margin-top:20rpx;
}
.row{
   width:100%; 
   margin:0 5rpx 5rpx 15rpx;  
}
.row-title{
  font-size:15px;
  font-weight: bold;
}
.row-content,.right-content,.right-content-btn{
   font-size:12px;
}
.row view{
  display: inline-block;
  padding-right:5rpx;
}
.right-content{
    color:#F76D61;
    margin-right:10rpx;
}
.right-content-btn{
  border: 1px solid #F76D61;
  color:#F76D61;
  margin-top:20rpx;
  margin-left:0;
  width:130rpx;
  height:55rpx;
  line-height:55rpx;
  background-color: #ffffff;
}

在movieList.wxss文件中引入公共樣式movieLayout.wxss：

@import "../../styles/movieLayout";

.page{
  margin-top:80rpx;
  height:100%;
}
.page-loading{
  display:flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-top:10rpx;
}
.page-loading .loading-img{
  margin-right:5rpx;
  width:30rpx;
  height:30rpx;
}
.sv{
  height:1000rpx;
}
  1. 編寫(xiě)樣式文件movieList.js

這里需要訪(fǎng)問(wèn)接口獲取數(shù)據(jù)， 在utils文件夾下建立api.js，封裝訪(fǎng)問(wèn)接口的方法，獲取數(shù)據(jù)，代碼如下：

var API_URL = 'http://t.yushu.im/v2/movie';

function fetchApi(type,params){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: `${API_URL}/${type}`, //模板字符串
      data: params,
      header: {
        'content-type': 'application/json' 
      },
      success: resolve,
      fail: reject
    })
  })
}

//http://t.yushu.im//v2/movie/in_theaters?start=0&count=20
module.exports = {
  //獲取電影列表
  getList(type,start=0,count=20){
    return fetchApi(type, {"start": start*count,"count":count})
      .then(res=>res.data)
  },
  //獲取電影詳情
  getDetail(id){
    return fetchApi("/subject/"+id)
      .then(res=>res.data)
  }
}

movieList.js代碼：

var api = require('../../utils/api')

Component({
  properties: {
    'sendValue':{
      type: String, //必填，目前接受的類(lèi)型包括：String, Number, Boolean, Object, Array, null（表示任意類(lèi)型）
      value: "" , 
      observer: function (newVal, oldVal) {
        this.setData({
          list: [],//電影列表
          start: 0
        })
      }
    }
  },
  data: {
    start: 0,
    list: [],
    showLoading: true,
    showMore: true
  },
  methods: {
    loadData(start) {
      console.log(this.properties.sendValue) 
      //http://t.yushu.im/v2/movie/in_theaters?start=0&count=20
      api.getList(this.properties.sendValue, start)
        .then(res => {
          if (res.subjects.length > 0) {
            this.setData({
              list: this.data.list.concat(res.subjects),//連接前面一頁(yè)的數(shù)據(jù)
              showLoading: false,
              showMore: true,
              start: start + 1 //頁(yè)數(shù)遞增
            })
          } else {
            this.setData({
              showMore: false
            })
          }
        })
    },
    handleScrollToLower(e) {
      //如果沒(méi)有更多的數(shù)據(jù)就不再加載
      if (!this.data.showMore) {
        return;
      }
      this.loadData(this.data.start);
    },
    handleRedirect(e) {
      var id = e.currentTarget.dataset.id;
      //電影詳情頁(yè)面跳轉(zhuǎn)并傳入當(dāng)前id值 下一篇文章會(huì)詳細(xì)講解 這里的代碼現(xiàn)在可以注釋
      wx.navigateTo({
        url: '../../pages/detail/detail?id=' + id,
      })
    },
    handleBuyTicket(e){
      console.log("點(diǎn)擊了購(gòu)票按鈕");
    },
  }
})
  1. 在home.wxml中引入movieList.wxml組件，并在home.js中調(diào)用加載列表數(shù)據(jù)的方法。

home.wxml：

 <view class="page">
  <view class="nav">
    <view class="{{homeSelected?'current':'default'}}" bindtap="handleHomeSelected">正在熱映</view>
    <view class="{{comingSelected?'current':'default'}}" bindtap="handleComingSelected">即將上映</view>
  </view>
  <view class="{{homeSelected?'show':'hidden'}}">
     <!-- 正在熱映 -->
     <movieList id="movieList" sendValue="{{movieType}}"></movieList> 
  </view>
  <view class="{{comingSelected?'show':'hidden'}}">
     <!-- 即將上映 -->
     <movieList id="movieComingList" sendValue="{{movieType}}"></movieList>   
  </view> 
</view>

home.js：

var api = require('../../utils/api')

Page({
  data: {
    homeSelected:true,
    comingSelected:false,
    movieType:'' //傳到movieList.wxml組件的參數(shù)
  },
  //轉(zhuǎn)發(fā)頁(yè)面
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '來(lái)自豆瓣電影',
      path: '/pages/index/index',
      success: function (res) {
        console.log('轉(zhuǎn)發(fā)成功')
      },
      fail: function (res) {
        console.log('轉(zhuǎn)發(fā)失敗')
      }
    }
  },
  handleHomeSelected(e){
    this.setData({
      homeSelected: true,
      comingSelected: false,
      movieType: 'in_theaters'
    })
    //調(diào)用movieList子組件的方法
    this.movieList = this.selectComponent("#movieList");
    this.movieList.loadData(0);//起始頁(yè)為0
  },
  handleComingSelected(e) {
    this.setData({
      homeSelected: false,
      comingSelected: true,
      movieType: 'coming_soon'
    })
    this.movieList = this.selectComponent("#movieComingList");
    this.movieList.loadData(0);
  },
  onReady: function () {
    this.handleHomeSelected();
  }

到這里電影列表獲取就完成啦~
最后還剩一個(gè)獲取電影詳情的頁(yè)面，其中主要會(huì)涉及到橫向滾動(dòng)組件的使用，下一篇繼續(xù)~
如果文中有什么不對(duì)的或者需要注意的地方歡迎大家指正，一起分享交流~

本文著作權(quán)歸作者所有，如需轉(zhuǎn)載，請(qǐng)聯(lián)系本人并標(biāo)明出處及原鏈接。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容