2、數據加載及下拉加載 · 小程序

[TOC] [碼云：接口代碼](https://gitee.com/dingmeili/minor_program_item) # 小程序的代碼要點 > 先寫wxml 先將結構寫出來，再對數據進行渲染 > 先向接口發送請求，請求成功再獲取數據，再將數據賦給wxml # 1. index.wxml > <import src="../template/template"></import> 將其他wxml文件引入此頁面 ``` <loading hidden="{{show}}"></loading> //當頁面為加載完時出現加載中動畫效果 <view class="container"> <block wx:for="{{data}}" wx:for-item="item" wx:key="index"> //循環 <view bindtap="handleClick" class="item" data-id="{{item.id}}"> //點擊發送請求 <view class="movie-item" > //獲取動態數據 <image src="{{item.imgUrl}}" /> <text>{{item.name}}</text> <view class="evalute">評分<text >{{item.average}}</text></view> </view> </view> </block> </view> ``` ## 1.1 block * 1. wx:for="{{data}}" //對這個數組進行循環 * 2. wx:for-item="item" //給data一個別名 * 3. wx:key="key" //給data一個別名 ## 1.2 bindtap="***" 點擊事件 ### 1.2.1 data-id="id" 跳轉的關鍵點 > 沒有id無法獲取跳轉的頁面 # 2. index.js ``` const app = getApp() Page({ data: { show: false, start: 0, // data是否為空 isEmpty: true }, onLoad() { var self = this; wx.request({ url: 'https://douban.uieee.com/v2/movie/top250', header: { 'Content-Type': 'json' }, success: function (res) { /* var data = res.data.data; self.setData({ data, top:2 }); */ self.handleData(res); } }) }, handleData(res) { //onload的數據和onreach var totalData = [] var data = []; var subject = res.data.subjects; // console.log(subject) for (let key in subject) { // console.log(subject[key].title) var name = subject[key].title; // console.log(name) var average = subject[key].rating.average; var imgUrl = subject[key].images.small; var temp = {}; var id = subject[key].id; if(name.length>6){ name = name.slice(0,5); } temp.name = name; temp.average = average; temp.imgUrl = imgUrl; temp.id = id; data.push(temp); // console.log(data) } //到到達底部重新加載 if(!this.data.isEmpty){ var totalData = this.data.data.concat(data); console.log(totalData) this.setData({ data: totalData, show:true }) } else{ this.setData({ data, show: true }) this.data.isEmpty = false; } wx.hideNavigationBarLoading(); }, handleClick(event) { var id = event.currentTarget.dataset.id; // console.log(id) wx.navigateTo({ url: '/pages/movie-datail/movie-datail?id=' + id }); }, onReachBottom: function () { wx.showNavigationBarLoading(); var self = this; this.data.start += 20; var url = "https://douban.uieee.com/v2/movie/top250" var nextUrl = url + "?start=" + this.data.start + "&count=20"; console.log(nextUrl); wx.request({ url: nextUrl, header: { 'Content-Type': 'json' }, success: function (res) { self.handleData(res); } }); } }); ``` ## 2.1 onLoad（）{} ``` onLoad() { var self = this; //將this定義到當前頁面 wx.request({ url: 'https://douban.uieee.com/v2/movie/top250', header: { 'Content-Type': 'json' }, success: function (res) { /* var data = res.data.data; self.setData({ data, top:2 }); */ self.handleData(res); } }) } ``` ### 2.1.1 `wx:request({})` 向服務器發送請求 * 1. url:'#' //請求服務器地址 * 2. header：//請求頭 ``` header: { 'Content-Type': 'application/json' //在測試的豆瓣接口中是json } ``` * 3. success: function (res){} //請求成功執行請求體 ``` success: function (res) { self.handleData(res); //調用函數 } ``` ## 2.2 請求體（此實例為 `handleData(res) {}` ） ``` handleData(res) { //onload的數據和onreach var totalData = [] var data = []; var subject = res.data.subjects; // console.log(subject) for (let key in subject) { // console.log(subject[key].title) var name = subject[key].title; // console.log(name) var average = subject[key].rating.average; var imgUrl = subject[key].images.small; var temp = {}; var id = subject[key].id; if(name.length>6){ name = name.slice(0,5); } temp.name = name; temp.average = average; temp.imgUrl = imgUrl; temp.id = id; data.push(temp); // console.log(data) } //到到達底部重新加載 if(!this.data.isEmpty){ var totalData = this.data.data.concat(data); console.log(totalData) this.setData({ data: totalData, show:true }) } else{ this.setData({ data, show: true }) this.data.isEmpty = false; } wx.hideNavigationBarLoading(); //加載完畢時結束加載動畫，與2.3.1和再一起用 } ``` ### 2.2.1 this.setData({}) 將請求到的數據發送給wxml進行渲染 > 函數用于將數據從邏輯層發送到視覺層，同時改變對應的this.data的值 ## 2.3 下拉加載 ``` data: { show: false, start: 0, // data是否為空 isEmpty: true } onReachBottom: function () { wx.showNavigationBarLoading(); var self = this; this.data.start += 20; var url = "https://douban.uieee.com/v2/movie/top250" var nextUrl = url + "?start=" + this.data.start + "&count=20"; // 請求地址發生改變，獲取的內容改變，格式一定不能錯 console.log(nextUrl); wx.request({ url: nextUrl, //新的請求接口 header: { 'Content-Type': 'json' }, success: function (res) { self.handleData(res); } }); } ``` ### 2.3.1 加載中動畫 > 開始加載 wx.showNavigationBarLoading(); > 結束加載 wx.hideNavigationBarLoading(); ### 2.3.2 加載的內容（頁面改變的變量） ``` this.data.start += 20; start 應設置初始值再data里如 data:{ start:0; } ``` ### 2.3.3 加載內容時要考慮當前值是否為空，所以 2.2 handleData(res) 里if-else是為此寫的代碼 > Tip > 1. 要對totalData 進行定義 var totalData =[ ]; > 2. data:{ isEmpty:true } //isEmpty判斷data是否為空 > 3. 當數據為空，也就是執行了else 后將 isEmpty 改為Flase，否則他將一直執行else > this.data.isEmpty = false; ### 2.3.4 加載失敗的可能原因 > 1. 地址格式不正確 > 2. 函數大小寫未注意 > 3.data:{ start:0 } start 要給一個初始值 ## 2.4 點擊跳轉其他頁面 ``` handleClick(event) { var id = event.currentTarget.dataset.id; // 本頁面需獲取頁面，即跳轉的標識符 wx.navigateTo({ url: '/pages/movie-datail/movie-datail?id=' + id }); } ``` ### 2.4.1 `wx:navigateTo `保留當前頁面，跳轉到應用內的某個頁面，可以返回原頁面 ### 2.4.2 某個頁面加載數據 ``` Page({ onLoad(option){ var self = this; var id = option.id; wx.request({ url: 'https://douban.uieee.com/v2/movie/'+id, header: { 'Content-Type': 'json' }, success: function(res) { var imgUrl = res.data.image; self.setData({ imgUrl }) } }); } }) ```