【练习】设置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,想要输入完毕后执行的事件用这个即可