怎样看新浪微博iPhone界面

作者:课课家更新于： 2015-10-30 10:19:48

打开这篇文章的人都是爱问知识的人，下面我给大家讲讲。

相信不少Sencha Touch的vmware虚拟机粉丝们都为Script能开发出手机Web App应用而感到兴奋。本次示例将以iPhone界面作为参考，使用Sencha Touch开模仿iPhone界面。
首先，将以iPhone下述的界面目标作为参考：

Sencha Touch将采用以下UI组件：
Ext.Panel Ext.List
首先，建立一个html 5页面和一个js页面，如下代码：

1.  
2.  
3.      
4.          
5.         demos 
6.          
7.           
8.           
9.      
10.      
11.      
12.      

sencha.js先增加setup以便div css视频教程文档加载完后初始化Panel组件，如下代码：

1. Ext.setup({ 
2.     onReady: function() { 
3.         var moreObj; 
4.         moreObj = Ext.extend(Ext.Panel, { 
5.             layout : 'card', 
6.             initComponent : function() { 
7.                 moreObj.superclass.initComponent.call(this,arguments); 
8.             } 
9.         }) 
10.   
11.         new moreObj({ 
12.             fullscreen : true, 
13.             scroll : 'vertical' 
14.         }); 
15.   
16.     } 
17. }); 

完成初始化Panel组件后，界面将存在一个Panel的UI，此时并没有任何内容，现在添加一个list以便显示更多数据列表。在initComponent初始化函数内增加以下一段Ext.list代码：

1. this.list5 = new Ext.List({ 
2.       itemTpl: '{name}', 
3.       store: new Ext.data.Store({ 
4.              fields: ['name','icon','needsIcon'], 
5.              data: [ 
6.                     {"name" : "直接登录","icon":'login',"needsIcon":true}, 
7.                     {"name" : "找回密码","icon":'pass',"needsIcon":true}, 
8.                     {"name" : "声音提示","icon":'sound',"needsIcon":true}, 
9.                     {"name" : "关于我们","icon":'version',"needsIcon":false}, 
10.                     {"name" : "问题反馈","icon":'question',"needsIcon":true}, 
11.                     {"name" : "客服电话","icon":'phone',"needsIcon":true}, 
12.                     {"name" : "软件版本0.92","icon":'version',"needsIcon":true} 
13.              ] 
14.         }), 
15.         title: 'title1' 
16. }); 

完成list的初始化后，将list加入到外部Panel中，在initComponent增加如下代码：

1. this.listpanel = new Ext.Panel({ 
2.        title: '更多', 
3.        items: [this.list5] 
4. }) 
5. this.items = [this.listpanel]; 

此时大部分sencha代码都基本完毕，效果如下图：

相信大家都看到此时的界面服务器配置仍然不是我们所想要的微博更多界面，那我们现在开始对该list界面进行修饰一翻，在初始化Ext.list内部增加以下几个属性：

1. ui: 'round', 
2. scroll : false, 
3. margin : '10 15 10 15' 

增加属性margin是为了list的数据和上下左右的边框距离远一点，以便更好展示按钮效果。
接着，在页面上增加一个css文件，以便对list的ui进行定制，如下导入css文件：

在sencha.js里面的list组件增加两个css属性，如下代码：

1. cls : 'list2', 
2. itemCls : 'list2_item', 

第一个cls为list组件的class属性，第二个为list组件的每个数据项各自的class属性

移动应用中的每一个可以与用户产生互动的地方，无论是单一的交互元素，还是功能模块整体，都应该有助于提升产品的品牌认知度、用户忠诚度及满意度；设计人员应该有能力识别出它们当中最关键的那些，例如特色功能、视觉风格、文案、字体或动画效果等。我们的团队经手过很多不同的产品，虽然从整体角度讲，它们具有各自的品牌风格，但这些设计方案大多是由同一套基础UI元素衍生发展出来的。我们可以将基础UI元素组合成为界面模块，而组件化、可复用的核心界面模块，则可以进一步构成整个用户界面。

　　所以，经由对这些UI元素的风格设定，我们就可以逐步为界面整体打造出能够体现品牌风格的独有特质。在概念阶段，试着将那些在以下几个方面发挥关键作用的UI元素识别出来：

• 有助于提升产品差异化竞争力的功能(例如Path中的照片检视等)。
• 产品核心功能(例如在线购物类应用中的结帐功能)。
• 模式化的设计语言。Windows Phone 7的Metro UI是一个典型的例子：具有强烈风格的字体、布局和交互等方面的模式，构成了其独特的设计基因。

最后在test.css文件内增加以下css代码，以便修正每个数据项的位置以及风格：

1. .list2{ 
2.     -webkit-border-radius : 10px; 
3. } 
4.   
5. .list2 .x-list-item{ 
6.     background-color : #FFF; 
7.     border:1px solid silver; 
8.     -webkit-border-radius : 10px; 
9. } 
10.   
11. .list2 .x-list-item:first-of-type{ 
12.     margin : 0 0 15px 0; 
13.     border-top:1px solid silver; 
14. } 
15. .list2 .x-list-item:nth-of-type(2){ 
16.     -webkit-border-bottom-left-radius:0px; 
17.     -webkit-border-bottom-right-radius:0px; 
18. } 
19. .list2 .x-list-item:nth-of-type(3){ 
20.     border-top:0px; 
21.     margin : 0 0 15px 0; 
22.     -webkit-border-top-left-radius:0px; 
23.     -webkit-border-top-right-radius:0px; 
24. } 
25. .list2 .x-list-item:nth-of-type(4){ 
26.     -webkit-border-bottom-left-radius:0px; 
27.     -webkit-border-bottom-right-radius:0px; 
28. } 
29. .list2 .x-list-item:nth-of-type(5){ 
30.     border-top:0px; 
31.     -webkit-border-radius:0px; 
32. } 
33. .list2 .x-list-item:nth-of-type(6){ 
34.     border-top:0px; 
35.     margin : 0 0 15px 0; 
36.     -webkit-border-top-left-radius:0px; 
37.     -webkit-border-top-right-radius:0px; 
38. } 
39. .list2 .x-list-item:nth-of-type(7){ 
40.     margin : 0 0 15px 0; 
41. } 
42.   
43. .list2 .x-item-selected:last-child{ 
44.     -webkit-border-bottom-left-radius:10px; 
45.     -webkit-border-bottom-right-radius:10px; 
46. } 
47. .list2 .x-item-selected:first-of-type{ 
48.     -webkit-border-top-left-radius:10px; 
49.     -webkit-border-top-right-radius:10px; 
50. } 
51.   
52. .list2 img{ 
53.     margin-right:10px; 
54. } 

此处的css更多的是利用radius属性对每个选项的的四个角进网络视频服务器行圆角效果，由于list的每个数据项都需要分组，css里面则采用nth-of-type等选择符自定义分组，因此存在一定的局限性。
此时代码已经基本完成。效果图如下：

这样，iPhone微博更多UI界面已经制作完成。目前对于此解决方案，存在一种局限性，list数据需固定、分组需固定，暂时无法做到数据的实时性等功能。

大家学到了多少？如果意犹未尽，可前往课课家官网直接查看 。