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