Mui开发_1

//mui文档需要花一定时间去完成

1.如何跳转页面

a.mui.openWindow({})，直接打开新页面，通过extras来向子页面传递参数

b.mui.init({subpages:[]})，在当前页面加载子页面

c.预加载

　　mui.init({preloadPages:[]}) 加载多个

　　mui.preload({}) 直接加载一个

 

2.事件绑定

a.addEventListener监听特定元素

b.使用.on进行批量绑定

 

3.请求接口

a.mui.ajax()

b.mui.post()

c.mui.get()

d.mui.getJSON()

 

1.实现底部tab

思路：

a.使用基于subnview模式的原生tab

b.使用MUI自带的样式制作tab图标

　　首先创建一份选项卡模板，修改主要涉及到三个文件，index.html、manifest.json和util.js

　　manifest文件修改plus下的subNViews，图标替换

　　util文件主要是toggleNview判断绘制几个icon和text

　　index文件主要是选项卡切换，和去掉中间的圆形按钮

主要就是掌握subnview

 

2.搜索框

a.在首页画出一个搜索框

　　最外层一个DIV，设置外边距和背景

　　两个文本内容：搜索框和提示文字

　　通过addEventListener方法设置tap事件（点击事件）

b.给搜索框加上点击事件

 

3.热映列表布局

a.在首页搜索框下方画一个列表，并填充假数据

　　使用mui提供的列表和区域滚动组件（需要手动初始化scroll控件）

　　使用样式设置列表的位置

 

4.获取热映列表接口数据

　　使用mui提供的mui.getJSON方法请求接口 ？http://api.douban.com/v2/movie/in_theaters

　　根据页面展示需求，将接口数据转换成响应的格式

　　注意：需要掌握vue的基础操作

 

5.下拉刷新，上拉加载

a.列表页实现下拉刷新

b.列表页实现上拉分页加载功能（有问题）

 

6.预加载详情页

a.使用mui.preload实现预加载

　　预加载需要放置在mui.plusReady中

 

7.电影详情页面跳转和数据传递

a.从热映列表也跳转至电影详情页

　　使用mui.openWindow打开详情页面

b.从热映列表页传递参数至电影详情页

　　使用自定义事件实现传递参数

 

8.详情页面布局设计

a.主要使用到css基础知识来调试出我们想要的页面

 

9.将获取电影详情数据绑定到页面上

a.调用豆瓣网电影详情接口获取数据

　　使用MUI提供的getJSON方法请求接口

　　根据页面展示需要，将接口数据转化成相应的格式

　　添加hide监听事件

b.页面上正常显示

c.页面隐藏时，清空页面数据

 

10.演员详情页

a.从电影详情页跳转到演员详情页

　　使用mui.openWindow打开详情页

b.从电影详情页传递参数至演员详情页

　　使用extras参数传输

 

11.vue实现数据绑定

a.调用详情接口获取数据

b.页面上正常展示

c.页面隐藏时，清空页面数据

 

http://api.douban.com/v2/movie/top250?start=25&count=25

转载于:https://www.cnblogs.com/kongkongFabian/p/10020696.html