【練習】將詳細頁面中的導航欄動態更改,根據電影型別在more-movie頁面中載入資料,上滑載入更多資料
一、將詳細頁面中的導航欄動態更改
1.在movie-list-template.wxml中 :
<text class="more" catchtap='onMoreTap' data-category="{{categoryTitle}}">更多></text>
給哪個標籤繫結事件,想在這個事件中傳輸資料,就在這個標籤中自定義屬性
之前在movie.js中更改slogan,繫結了事件categoryTitle
2.在movie.js中:
onMoreTap:function(event){
var category=event.currentTarget.dataset.category; 獲取點選事件標籤中的資料
wx.navigateTo({
url: 'more-movie/more-movie?category=' + category,
success: function(res) {}
})
}
3.在more-movie.js中獲取傳輸的資料
onLoad: function (options) {
var category=options.category;
4.動態設定導航欄必須寫在onReady中,所以需要中間變數
先在data中定義中間變數:
data: {
navigateTitle:{}
}
在onLoad中繫結資料:
onLoad: function (options) {
var category=options.category;
this.setData({
navigateTitle: category
});
}
在onReady中使用資料:
onReady:function(event){
wx.setNavigationBarTitle({
title: this.data.navigateTitle
}) 動態設定標題欄的方法
通常都是在.json檔案中
"navigationBarTitleText": "導航欄內容"
}
二、根據電影型別在more-movie頁面中載入資料
1.在util.js中將wx.request封裝成公共函式
function http(url,callBack) {callBack只是函式名
wx.request({
url: url,
method: "GET",
header: { "Content-Type": "" },
success: function (res) {
callBack(res.data); 具體使用函式,要加引數
}
});
}
出口:
module.exports={
http:http
}
2.在more-movie.js中引入
var util=require("../../../utils/util.js");
3.在more-movie.js中的onLoad函式中,判斷傳入的資料category從而更改url,再呼叫http函式,傳入url
之前已經傳入了資料category
onLoad: function (options) {
var category=options.category;
var dataUrl="";
switch (category){
case "正在熱映":
dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters"; var app=getApp();一開始就要引入
break;
case "即將上映":
dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon"; 預設20條資料
break;
case "top250":
dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
break;
};
util.http(dataUrl, this.processDoubanData);
}
4.封裝回撥函式processDoubanData
processDoubanData: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
});
}
5.在movie專案中建立movie-grid-template專案
movie-grid-template.wxml:
<import src="../movie-picture-template/movie-picture-template.wxml" />
<template name="movie-grid-template">
<scroll-view class="container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
<block wx:for="{{movies}}" wx:for-item="movie">
<view class="template">
<template is="movie-picture-template" data="{{...movie}}" />
</view>
</block>
</scroll-view>
</template>
movie-grid-template.wxss:
@import "../movie-picture-template/movie-picture-template.wxss";
.template{
float: left; 用float不用flex是因為flex對scroll-view沒有作用
margin-bottom: 40rpx;
}
.container{
margin: 40rpx 0 40rpx 6rpx;
height: 1300rpx; 後面會講為什麼要給高度
}
6.more-movie中引入模版
<import src="../movie-grid-template/movie-grid-template.wxml" />
<template is="movie-grid-template" data="{{movies}}" />
@import "../movie-grid-template/movie-grid-template.wxss";
三、上滑載入更多資料
scroll-view元件
1.在movie-grid-template.wxml中,把最外面的view用scroll-view替換
<scroll-view class="container" scroll-y="true" 允許縱向滾動 scroll-x="false" 禁止橫向滾動 bindscrolltolower="onScrollLower" 滾動到底部/右邊會觸發>
(bindscrollupper滾動到頂部/左邊會觸發)
2.在more-movie.js中實現onScrollLower函式
必須給<scroll-view>給高度,超過這個高度才執行onScrollLower
.container{
height: 1300rpx;
}
3.頁面剛進入獲取的是0-19號資料,向上滑應該載入20-39
url要重新獲取
onScrollLower: function (event) {
var nextUrl = this.data.requestUrl+"?start="+this.data.totalCount+"&count=20";
util.http(nextUrl, this.processDoubanData);
}
只要是使用this.data.資料,就在data中定義一個初始值,totalCount:0
4.在onLoad中,switch判斷完dataUrl賦值完,將dataUrl傳給requestUrl
this.setData({
requestUrl: dataUrl
});
5.在processDoubanData中設定totalCount
this.data.totalCount+=20; this.data.設定可以,但是最好用this.setData
// var count = this.data.totalCount;
// count += 20;
this.setData({
movies: totalMovies
// totalCount: count
});
此時新載入的資料會替代原先的,因為movies每次呼叫方法都被覆蓋了
6.定義data:{isEmplty:true},迴圈取完資料後,定義新的
var totalMovies={}; 新的
if(!this.data.isEmpty){
totalMovies = this.data.movies.concat(movies); 拼接
}else{
this.setData({
isEmpty: false
});
totalMovies=movies;
}
// var count = this.data.totalCount;
// count += 20;
this.data.totalCount+=20;
this.setData({
movies: totalMovies
// totalCount: count
});
相關文章
- 動態頁面資料載入不全的問題
- 小程式列表頁上滑載入更多配合 Laravel 分頁Laravel
- 超詳細講解頁面載入過程
- SyntaxHighlighter 頁面動態js載入方式整理JS
- 面試:頁面載入海量資料面試
- Jquery Datatables (2) 動態載入資料型別jQuery資料型別
- 從頁面載入到資料請求,前端頁面效能優化實踐分享前端優化
- JavaScript系列:動態建立iframe並載入頁面JavaScript
- 頭部導航欄也是動態的,板塊裡面的內容根據頭部導航欄動態展現資料
- js 進入頁面載入的方法JS
- ArkWeb頁面載入與瀏覽記錄導航 - 基礎操作Web
- 根據瀏覽器的滑動條 固定導航欄瀏覽器
- 直播平臺搭建,JS實現頁面下拉載入資料操作JS
- https頁面載入http資源的解決方法HTTP
- Python頁面載入的等待方式Python
- 頁面載入全過程
- 使用Web元件載入頁面Web元件
- 頁面載入和解析流程
- ListView動態載入資料View
- 根據使用者的不同登入不同的頁面
- vue中頁面載入進度條效果的實現Vue
- 手機直播原始碼,JS實現頁面下拉載入資料操作原始碼JS
- layui 資料表格重新載入資料分頁器回到第一頁UI
- 頁面圖片預載入與懶載入策略
- WebForm登入頁面(連線資料庫)WebORM資料庫
- 小程式初始化載入,根據登入狀態判斷跳轉首頁還是登入頁
- Java將頁面中的資料存到MySQL資料庫中,漢字變成問號JavaMySql資料庫
- 023.Vue3入門,父頁面給子頁面傳遞資料Vue
- 根據使用者型別跳轉頁面(基於mybatis)型別MyBatis
- Flutter下拉重新整理,上拉載入更多資料Flutter
- 面試之 一個頁面從輸入url到頁面載入顯示完成,中間都經歷了什麼面試
- 頁面載入效能之優化LCP優化
- JS 頁面載入過程問題JS
- ajax實現頁面非同步載入非同步
- 瀏覽器頁面載入過程瀏覽器
- HarmonyOS Next 入門實戰 - 導航框架:頁面路由、元件導航(Navigation)框架路由元件Navigation
- Vue 頁面狀態保持頁面間資料傳輸的一種方法Vue
- 026.Vue3入門,父頁面給子頁面傳遞資料,在子頁面不能修改,只能改自己的data內容Vue