版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haoyuexihuai/article/details/86151472
前言
之前使用MUI做过一个APP的开发,学习的时候仅限于官方API,前端开发也是一知半解,抽空把仿豆瓣电影是MUI视频看了一下,部分内容跟官网已经不一样了,但是开发的思路值得学习。
1.获取ajax数据
使用的是mui.getJSON(自己用的是mui.ajax()),数据处理单独写一个方法,数据绑定使用的是vue
//请求热映列表接口
mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {}, function(resp) {
data_movies.movies = convert(resp.subjects); //数据绑定到vue的movies中
});
//数据转换 ,单独做数据转换,不直接在ajax方法中处理
function convert(items) {
var newItems = [];
//遍历items
items.forEach(function(item) {
var genres = item.genres.toString().replace(/,/g, ' / ');
//导演
var directors = '';
for(var i = 0; i < item.directors.length; i++) {
directors += item.directors[i].name;
if(i != item.directors.length - 1) {
directors += ' / ';
}
}
//演员
var casts = '';
for(var i = 0; i < item.casts.length; i++) {
casts += item.casts[i].name;
if(i != item.casts.length - 1) {
casts += ' / ';
}
}
newItems.push({
id: item.id,
title: item.title,
genres: genres,
cover: item.images.large,
score: item.rating.average,
directors: directors,
casts: casts
});
});
return newItems;
}
//定义Vue数据
var data_movies = new Vue({
el: '#movies',
data: {
movies: []
}
});
2.pullRefresh
控件可以在页面加载时,自动加载一次 auto: true
mui.init({
swipeBack: true, //启用右滑关闭功能
pullRefresh: {
container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down: {
auto: false, //可选,默认false.首次加载自动下拉刷新一次
callback: refreshData //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up: {
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: true, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
callback: loadMoreData //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
//刷新数据,重新调用接口
function refreshData() {
//请求热映列表接口
mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
start:0,
count:10
}, function(resp) {
data_movies.movies.splice(0,data_movies.movies.length);
data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
mui('#refreshContainer').pullRefresh().refresh(true);
});
}
//请求下一页数据
function loadMoreData(){
//请求热映列表接口
mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
start:data_movies.movies.length,
count:10
}, function(resp) {
data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
mui('#refreshContainer').pullRefresh().endPullupToRefresh(data_movies.movies.length > resp.total);
});
}
3.页面滚动条保留一个
scroll与DOM各有一个滚动条
mui('.mui-scroll-wrapper').scroll({
indicators:false
});
4. 页面预加载
1.页面预加载就是在用户还没有触发跳转页面链接之前,就已经将该页面进行创建,当用户访问该页面时就可以立即进行跳转,减少页面创建时间,提高用户体验。
2.使用预加载可以通过自定义事件传递参数
- 方法一:通过mui.init()初始化方法中的preloadPages参数进行设置。
-
这种方法可以加载多个页面,但是不会返回预加载页面的引用。
- 方法二:使用mui.preload()方法实现预加载
-
这种方法可以立即返回对应webview的引用,但是一次只能预加载一个页面,如果需要加载多个页面,则需要多次调用。
//预加载电影详情页面
var detailPage = mui.preload({
id:'movie-detail',
url:'./html/movie-detail.html'
});
//打开电影详情页面
function open_detail(item){
//触发详情页面的movieId事件
mui.fire(detailPage,'movieId',{
id:item.id
});
//打开
mui.openWindow({
id:'movie-detail'
});
}
//Top页面给detailPage赋值,getWebviewById:查找指定标识的webviewObject对象
//给detailPage赋值,根据ID获取详情页面
detailPage = plus.webview.getWebviewById('movie-detail');
if(!detailPage){
detailPage = mui.preload({
id:'movie-detail',
url:'./movie-detail.html'
});
}
详情页面获取数据
//添加movieId自定义事件
window.addEventListener("movieId", function(event) {
//获取事件参数
var id = event.detail.id;
console.log(id);
}