【練習】設定loading狀態,下拉重新整理列表,“window”中“backgroundColor”, 電影搜尋頁面構建

一、設定loading狀態（toast使用者體驗不好）

1.在onScrollLower中設定wx.showNavigationBarLoading();

但是不會自動消失

2.在processDoubanData:function(data)繫結完資料後 wx.hideNavigationBarLoading();

不知為什麼載入資料很快，幾乎不顯示Loading,因為網太好了？

二、下拉重新整理列表（滑鼠必須按下去，觸控板向下滑不觸發）

1.先在more-movie.json中配置：

 

{

"enablePullDownRefresh": true

}

注意：只有app.json中才可以配置除了“window”以外的屬性

         xxx.json中只能配置“window”，且省略“window”

2.下拉框架會自動呼叫onPullDownRefresh函式

 

onPullDownRefresh:function(event){

var refreshUrl = this.data.requestUrl + "?start=0&count=20";

util.http(refreshUrl, this.processDoubanData);

wx.showNavigationBarLoading();

}

3.在processDoubanData:function(data)中wx.hideNavigationBarLoading();的後面停止重新整理wx.stopPullDownRefresh();

4.此時發現每次重新整理後，新重新整理的20條資料會加在原先的資料後面，變成40條資料，因為之前設定的isEmpty在這裡應該一直讓它是 true

 

this.setData({

isEmpty:true 單獨寫這個就可以了

// movies:{} 如果單獨只是把movies改成空，會報錯concat is not a function

});

三、“window”中“backgroundColor”配置的是哪裡？

四、電影搜尋頁面構建

input元件：value:輸入框的初始內容（無法改變樣式）

  placeholder：輸入框為空時的佔位符（可以用placeholder-class改變樣式）

                     bindinput：每輸入一個字元，就會執行一次（適合做實時檢索）

bindfocus：輸入框聚焦時觸發

bindblur：失去焦點時觸發（回車不管用，但是手機端沒有回車）

                      bindchange：變化時觸發，類似bindblur（回車也管用），但是如果輸入框內文字不改變就不會觸發，而且API中已沒有此方法

1.movies.wxml中編寫搜尋框

 

<view class="search">

<icon type="search" size="13" color='#405f80'></icon>

<input type='text' placeholder="你的名字" placeholder-class="search" bindfocus="onFocusTap" bindblur="onBlurTap"></input>

</view>

icon屬性：

 

type	String		icon的型別，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon的大小，單位px
color	Color		icon的顏色，同css的color

樣式：

.search{

height: 80rpx;

background: #f2f2f2;

width: 100%;

display: flex;

flex-direction: row;

}

.search icon{

margin: auto 0 auto 20rpx; 垂直居中

}

.placeholder{

margin-left: 20rpx;

color: #d1d1d1;

font-size: 14px;

}

.search input{

height: 100%;

width: 600rpx;

margin-left: 20rpx;

font-size: 28rpx;

}

2.在movies.html中寫搜尋頁面，在最底下寫，判斷顯示 利用movie-grid-template模版可以直接寫出來

 

<view class="search-panel" wx:if="{{searchPanelShow}}">

<template name="movie-grid-template"/>

</view>

3.在movies.js中先定義

data:{

"containerShow":true,

"searchPanelShow":false

}

只要獲取焦點，就改變containerShow和 searchPanelShow

 

onFocusTap:function(event){

//獲取焦點後，就顯示searchPanel頁面

this.setData({

containerShow:false,

searchPanelShow:true

})

}

根據containerShow和 searchPanelShow來顯示和隱藏搜尋頁面

 

<view class="contanier" wx:if="{{containerShow}}">

<view class="search-panel" wx:if="{{searchPanelShow}}">

 

當搜尋頁面顯示的時候還有一個“x”號，也根據searchPanelShow來顯示

 

<image wx:if="{{searchPanelShow}}" src="/images/close.png" bindtap='onCloseTap'></image>

.search image{

width: 32px;

height: 32px;

margin: auto 0 auto 0;

}

4.點選“x”號，回到之前的頁面

 

onCloseTap:function(event){

this.setData({

containerShow: true,

searchPanelShow: false

})

}

5.呼叫豆瓣API來獲取資料：編寫失去焦點時觸發函式，先是獲取url，再傳送資料，再進行資料繫結

 

電影搜尋

Resources URI

/v2/movie/search?q={text}

獲取input中輸入的文字，作為上面的關鍵字 {text}

 

onBlurTap:function(event){

var text=event.detail.value;

var searchUrl = app.globalData.doubanBase + "/v2/movie/search?q="+text;

util.http(searchUrl, this.method); 回撥函式前面一定要加this！！！

},

method:function(data){

var movies = [];

for (var i in data.subjects) {

var subject = data.subjects[i];

var title = subject.original_title;

if (title.length >= 6) {

title = title.substring(0, 6) + "...";

}

var temp = {

stars: subject.rating.stars,

title: title,

average: subject.rating.average,

coverageUrl: subject.images.large,

movieId: subject.id

}

movies.push(temp);

}

this.setData({

movies:movies

});

}

<view class="search-panel" wx:if="{{searchPanelShow}}">

<template is="movie-grid-template" data="{{movies}}" />

</view> 繫結資料

還有一種方法：

onBlurTap:function(event){

var text=event.detail.value;

var searchUrl = app.globalData.doubanBase + "/v2/movie/search?q="+text;

this.getMovieLIstData(searchUrl,"searchResult","");

},

必須這樣：<template is="movie-grid-template" data="{{...searchResult}}" />

 

getMovieLIstData:function(url,settedKey,categoryTitle){

var that=this;

wx.request({

url: url,

method:"GET",

header: { "Content-Type":""},

success:function(res){

that.processDoubanData(res.data, settedKey, categoryTitle);

}

});

},

processDoubanData: function (moviesDouban, settedKey,categoryTitle){

var movies=[];

for (var i in moviesDouban.subjects) {

var subject = moviesDouban.subjects[i];

var title = subject.original_title;

if(title.length>=6){

title=title.substring(0,6)+"...";

}

var temp = {

stars: subject.rating.stars,

title: title,

average: subject.rating.average,

coverageUrl: subject.images.large,

movieId: subject.id

}

movies.push(temp);

}

var readyData={};

readyData[settedKey]={

movies:movies

};

this.setData(readyData);

}

若要清除上一次搜尋記錄：在onCloseTap函式中令searchResult:{}為空

 

input中有新的事件bindconfirm,想要輸入完畢後執行的事件用這個即可