浙江建设网站首页,建筑木模板尺寸,天津免费做网站,windows优化大师使用方法本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面。 导入项目数据模板分离MVVM模型自定义事件展示新闻九宫格展示将要学习的demo效果图如下所示 1. 导入完整项目 本节示例demo请参考下载地址#xff0c;可以导入到设计器中学习。 为了方便大家理解页面结构#xf…本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面。 导入项目数据模板分离MVVM模型自定义事件展示新闻九宫格展示将要学习的demo效果图如下所示 1. 导入完整项目 本节示例demo请参考下载地址可以导入到设计器中学习。 为了方便大家理解页面结构请参考下图图中红框所示的上面部分是SegmentView组件和下面的BottomBar共同组成页面公共部分而蓝框中是一个SlideView组件可以左右滑动切换页面且跟SegmentView联动页面个数则是取决于数据条数如数据有四条就有四个页面绿框所示是ListView组件在本教程中是SlideView的模板而ListView又可以绑定不同模板来展现不同页面而黄框所示是跟上节教程中相同的直接引用一个UI页面。总而言之这里的页面层级关系是SlideView的模板中嵌套了一个ListView而ListView的模板又是其他不同页面。 2. 数据模板分离DeviceOne的数据绑定是采用了MVVM模式的实现了页面和数据分离数据通过绑定在不同模板上控制了页面的显示。DeviceOne提供了两个数据绑定组件都是MM类型组件一个是ListData它本质上是一个可变数组支持JSON array可以增删改查数据另外一个是HashData它本质上是一个可变key-value键值对也可以增删改查。这里我们给SegmentView定义一个数据源jsonTabs再把这个数据源赋值给数据绑定组件ListData定义SegmentView的数据模型module。因为数据绑定组件可以绑定不同的数据源而一个数据源只能被一个数据绑定组件绑定是一对多的关系所以当我们想把相同的数据源作为SlideView的数据模型module时需要复制一份数据源。 定义好数据模型module我们再来定义ViewModel也就是模板视图。先给SegmentView定义一个模板视图UI页面newsTypeTabTemplate.ui修改根ALayout的id为do_ALayout_root里面拖拽一个Label修改id为do_Label_title调整Label的位置和大小。然后我们在newsTypeTabTemplate.ui.js里把Label的text和tag属性通过UI组件通用的setMapping方法跟数据模型module联系起来定义映射关系这样ViewModule模板视图就完成了。其中name和selected是jsonTabs数据源中的key现在只需要修改SegmentView的template属性将属性值指向我们刚刚定义的newsTypeTabTemplate.ui的urlView和ViewModule就联系起来了。 最后我们要将数据模型module和它们都建立起联系只需要用SegmentView添加绑定了数据模型module的ListData组件即可。 更多关于数据绑定的介绍详见数据绑定 3. 自定义事件为了让更真实的模拟新闻类App的使用习惯我们处理一下选择不同的SegmentView时底下的SlideView页面也跟着切换的效果即让SegmentView和SlideView联动起来。这个步骤非常简单只需要在SegmentView的indexChanged事件中将当前SegmentView所处cell的index赋值给SlideView的cell即可完成。 我们想要在SlideView切换不同的cell的同时页面数据也跟着切换这就需要在SlideView的indexChanged事件里做大量操作为了优化代码结构这里就将切换数据的操作全部放在自定义事件selectOneTab中完成只在触发indexChanged事件的回调中同时触发该自定义事件这样我们在订阅selectOneTab事件时所作代码也都会被执行了。 订阅selectOneTab事件在其中做更新数据的操作 需要特殊注意的是自定义事件的订阅和触发可以不在同一个页面的脚本环境中完成只需要保证自定义事件的触发在订阅之后即可。 更多关于自定义事件的使用详见自定义事件。 这里为了更好的体验效果让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。 因为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方法让头部或尾部复位。 5. 九宫格展示最后我们说一下第三张效果图中点击“”号会弹出一个快速选择新闻类型的UI界面如何实现。 首先画出需要弹出的UI页面newsTypeGrids.ui也如之前教程中处理弹出Picker页面一样在该页面中只放一个GridView组件其他地方设置成灰色半透明效果。再设置GridView的模板页newsTypeGridTemplate.ui同样定义好数据映射将之前给SegmentView定义的数据源也复制一份让GridView绑定上最后只需要在“”号的touch事件中让newsTypeGrids.ui显示出来即可。转载于:https://www.cnblogs.com/wjiaonianhua/p/5353693.html
