新闻类app页面使用说明书_一个App完成入门篇（五）- 完成新闻页面

太过爱你忘了你带给我的痛 2023-01-10 05:19 111阅读 0赞

本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面。

导入项目

数据模板分离MVVM模型

自定义事件

展示新闻

九宫格展示

将要学习的demo效果图如下所示

![5313eb4baf174d489d7e2de5840593d0.jpg][]

1. 导入完整项目

本节示例demo请参考下载地址，可以导入到设计器中学习。

为了方便大家理解页面结构，请参考下图

![3a15e7655ac049728602516139c68920.jpg][]

图中红框所示的上面部分是SegmentView组件，和下面的BottomBar共同组成页面公共部分，而蓝框中是一个SlideView组件，可以左右滑动切换页面且跟SegmentView联动，页面个数则是取决于数据条数，如数据有四条就有四个页面；绿框所示是ListView组件，在本教程中是SlideView的模板，而ListView又可以绑定不同模板来展现不同页面；而黄框所示是跟上节教程中相同的直接引用一个UI页面。总而言之，这里的页面层级关系是SlideView的模板中嵌套了一个ListView，而ListView的模板又是其他不同页面。

![ce0aa608b5914248b28eeb4b20e4b7ed.jpg][]

2. 数据模板分离

DeviceOne的数据绑定是采用了MVVM模式的，实现了页面和数据分离，数据通过绑定在不同模板上控制了页面的显示。DeviceOne提供了两个数据绑定组件，都是MM类型组件，一个是ListData，它本质上是一个可变数组(支持JSON array)，可以增删改查数据；另外一个是HashData，它本质上是一个可变key-value键值对，也可以增删改查。

这里我们给SegmentView定义一个数据源jsonTabs，

![218b28e7edb54e899d06722ec2ccd14d.jpg][]

再把这个数据源赋值给数据绑定组件ListData，定义SegmentView的数据模型module。

![d224fb375fca4776a87a652389e47c47.jpg][]

因为数据绑定组件可以绑定不同的数据源，而一个数据源只能被一个数据绑定组件绑定，是一对多的关系，所以当我们想把相同的数据源作为SlideView的数据模型module时需要复制一份数据源。

定义好数据模型module，我们再来定义ViewModel也就是模板视图。先给SegmentView定义一个模板视图UI页面newsTypeTabTemplate.ui，修改根ALayout的id为do\_ALayout\_root，里面拖拽一个Label，修改id为do\_Label\_title，调整Label的位置和大小。

![d470e280119c4b8aa24d05190aef7db8.jpg][]

然后我们在newsTypeTabTemplate.ui.js里把Label的text和tag属性通过UI组件通用的setMapping方法跟数据模型module联系起来，定义映射关系，这样ViewModule模板视图就完成了。(其中name和selected是jsonTabs数据源中的key)

![6b4788fe395649bdb1d32ff03ba81c49.jpg][]

现在只需要修改SegmentView的template属性，将属性值指向我们刚刚定义的newsTypeTabTemplate.ui的url，View和ViewModule就联系起来了。

![6a29a98d9fd74d088dfba646130ea009.jpg][]

最后我们要将数据模型module和它们都建立起联系，只需要用SegmentView添加绑定了数据模型module的ListData组件即可。

![167561513dda436482124bbe46bc76e8.jpg][]

更多关于数据绑定的介绍，详见数据绑定

3. 自定义事件

为了让更真实的模拟新闻类App的使用习惯，我们处理一下选择不同的SegmentView时底下的SlideView页面也跟着切换的效果，即让SegmentView和SlideView联动起来。这个步骤非常简单，只需要在SegmentView的indexChanged事件中将当前SegmentView所处cell的index赋值给SlideView的cell，即可完成。

![d601a91eccb74757ae3a2bc19412f497.jpg][]

我们想要在SlideView切换不同的cell的同时页面数据也跟着切换，这就需要在SlideView的indexChanged事件里做大量操作，为了优化代码结构，这里就将切换数据的操作全部放在自定义事件selectOneTab中完成，只在触发indexChanged事件的回调中同时触发该自定义事件，这样我们在订阅selectOneTab事件时所作代码也都会被执行了。

订阅selectOneTab事件，在其中做更新数据的操作

![9ff75feddfdf4cc78d93915a30f0d5f8.jpg][]

需要特殊注意的是，自定义事件的订阅和触发可以不在同一个页面的脚本环境中完成，只需要保证自定义事件的触发在订阅之后即可。

更多关于自定义事件的使用，详见自定义事件。

这里为了更好的体验效果，让SlideView能无限滑动并且加载速度更快，只需要简单的设置两个属性即可。其一就是将SlideView的looping属性设置为true，实现无限滑动；其二就是设置isAllCache属性为true，在浏览上一页时预缓存下个页面。

4. 展示新闻

新闻展示页面的数据是通过Http组件请求的后台数据，在手势向下pull或向上push滑动页面时刷新请求，接下来详细说下这个步骤如何实现。

展示新闻

用上面同样的方法，我们先处理一下SlideView的数据和模板，不同的是这里SlideView的模板里嵌套了一个ListView组件，所以我们先处理ListView组件。ListView的数据是从后台通过http请求获取的，所以在添加了ListView的页面newsIndexSlideTemplate.ui对应的newsIndexSlideTemplate.ui.js脚本环境中去请求数据，并在Http的请求成功事件中将数据绑定给一个ListData组件，再让ListView去绑定该数据，同时复位pull或push出来的头部。(需要注意的是，这里直接将请求到的数据绑定给ListView组件，所以需要前后台沟通好数据格式，在后台保存时也是用JSON Array。)

![ad0b96efa2c249e4a5631b6d426cf804.jpg][]

因为ListView是支持多模版的，这里我们给ListView组件绑定两个模板，一个用于展示新闻列表newsRowTemplate0.ui，一个用于展示轮播图片newsRowTemplate1.ui。这两个模板也同样在模板页的根节点上调用setMapping方法定义好数据映射关系，这样数据与模板就结合起来了，在ListView上就能显示我们从后台请求到的数据了。

这里提一个小的处理，因为我们不确定要展示的数据到底有多少个字节，全部展示要占用多大的空间，所以我们设置ListView的模板页中要展示数据的Label的高度为-1，表示自动高度，并且将maxLines属性设置为2，表示最多只显示两行，这样就能控制每个cell显示数据的空间都是固定高度的，数据能整齐排列。

另外一个小处理就是让图片显示的速度更快，因为所有图片都是网络图片，显示之前都会先去请求，这样在网络环境不稳定时可能会导致图片显示框先出现默认图片(设置defaultImage)再显示真正要显示的图片。这里只需要简单的设置ImageView的cacheType为temporary，表示第一次加载图片时就缓存到本地，以后每次打开这个ImageView都会先读缓存的本地图片，然后再读服务器的网络图片，这样就能优化ImageView的加载速度，从而提高体验。

刷新新闻

想要在ListView页面上向下pull和向上push操作中获取新的数据并重新显示在模板中，首先要设置ListView的isFooterVisible和isHeaderVisible属性为true，这样上下拉的时候使头部和尾部可见，再分别在ListView的pull和push事件中去重新请求数据，并且在http请求的success事件中调用ListView的rebound方法让头部或尾部复位。

![c986ad3f08434ad79d2021a404b558f3.jpg][]

5. 九宫格展示

最后，我们说一下第三张效果图中点击“+”号会弹出一个快速选择新闻类型的UI界面如何实现。

首先画出需要弹出的UI页面newsTypeGrids.ui，也如之前教程中处理弹出Picker页面一样，在该页面中只放一个GridView组件，其他地方设置成灰色半透明效果。再设置GridView的模板页newsTypeGridTemplate.ui，同样定义好数据映射，将之前给SegmentView定义的数据源也复制一份让GridView绑定上，最后只需要在“+”号的touch事件中让newsTypeGrids.ui显示出来即可。

[5313eb4baf174d489d7e2de5840593d0.jpg]: http://doc.deviceone.net/web/img/20160328/5313eb4baf174d489d7e2de5840593d0.jpg
[3a15e7655ac049728602516139c68920.jpg]: http://doc.deviceone.net/web/img/20160328/3a15e7655ac049728602516139c68920.jpg
[ce0aa608b5914248b28eeb4b20e4b7ed.jpg]: http://doc.deviceone.net/web/img/20160331/ce0aa608b5914248b28eeb4b20e4b7ed.jpg
[218b28e7edb54e899d06722ec2ccd14d.jpg]: http://doc.deviceone.net/web/img/20160331/218b28e7edb54e899d06722ec2ccd14d.jpg
[d224fb375fca4776a87a652389e47c47.jpg]: http://doc.deviceone.net/web/img/20160331/d224fb375fca4776a87a652389e47c47.jpg
[d470e280119c4b8aa24d05190aef7db8.jpg]: http://doc.deviceone.net/web/img/20160331/d470e280119c4b8aa24d05190aef7db8.jpg
[6b4788fe395649bdb1d32ff03ba81c49.jpg]: http://doc.deviceone.net/web/img/20160331/6b4788fe395649bdb1d32ff03ba81c49.jpg
[6a29a98d9fd74d088dfba646130ea009.jpg]: http://doc.deviceone.net/web/img/20160331/6a29a98d9fd74d088dfba646130ea009.jpg
[167561513dda436482124bbe46bc76e8.jpg]: http://doc.deviceone.net/web/img/20160331/167561513dda436482124bbe46bc76e8.jpg
[d601a91eccb74757ae3a2bc19412f497.jpg]: http://doc.deviceone.net/web/img/20160401/d601a91eccb74757ae3a2bc19412f497.jpg
[9ff75feddfdf4cc78d93915a30f0d5f8.jpg]: http://doc.deviceone.net/web/img/20160401/9ff75feddfdf4cc78d93915a30f0d5f8.jpg
[ad0b96efa2c249e4a5631b6d426cf804.jpg]: http://doc.deviceone.net/web/img/20160331/ad0b96efa2c249e4a5631b6d426cf804.jpg
[c986ad3f08434ad79d2021a404b558f3.jpg]: http://doc.deviceone.net/web/img/20160401/c986ad3f08434ad79d2021a404b558f3.jpg