【練習】設置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,想要輸入完畢後執行的事件用這個即可

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章