sencha touch iphone 列表箭头图标

Posted

技术标签:

【中文标题】sencha touch iphone 列表箭头图标【英文标题】:sencha touch iphone list arrow icon 【发布时间】:2012-06-07 02:15:09 【问题描述】:

我有一个 Sencha Touch 2 应用程序,其中有很多将onItemDisclosure 设置为true 的列表。尽管 iPhone 使用的是apple.css,但它们在 android 和 iPhone 上都显示蓝色圆圈中的白色箭头。

根据这里和 Sencha 论坛上的帖子,我尝试过使用

.x-list-disclosure 
    width: 10px;
    height: 13px;
    margin-top: 0.6em;
    right:1em !important;
    -webkit-mask: none;
    -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');

但这增加了一个放大的 iPhone 箭头在蓝色圆圈的下方

如何摆脱蓝色,让它看起来像 iPhone 风格?

【问题讨论】:

【参考方案1】:

最终手动修复它:

.x-list-item .x-list-disclosure 
    overflow: hidden;
    -webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAYAAACEYr13AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wGBwQ7Dme80Q4AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAKBJREFUOMvtU7ENAyEQM0i0DJMMxggnNoCKhpWyBxVINBQUlyrRJwKeKF0Ul9bZ8vl0wO8ixshExGdzYkSGEDilBKUUeu+w1oqZgRyRrTUAQO8dSimskkydnXNcSgGAZRKx2s97zznnpYlcGRhjnsOzdeTGQa5Hk60SHyAiaK1vH5/xIOZa6wv/3oH4RjxcgYguu+JVAt4R46TArV/4A7gDIZZWTRQC+PUAAAAASUVORK5CYII=') no-repeat;
    -webkit-mask-size: 1.2em;
    background-color: #FFFFFF;
    background-image: -webkit-linear-gradient(#939393,#000000);
    background-image: linear-gradient(#939393,#000000);
    position: absolute;
    width: 1em;
    height: 1.2em;
    bottom: 30%;

【讨论】:

以上是关于sencha touch iphone 列表箭头图标的主要内容,如果未能解决你的问题,请参考以下文章

iPhone Sencha Touch - 如何在 sencha touch 中将表格视图添加到拆分视图

Sencha Touch 应用部署到 iPhone 和 Android

Sencha Touch 2 - Iphone 应用程序 - 空白屏幕

sencha touch :: 如何避免iOS应用程序变慢(在phonegap内)

Sencha Touch 2 中的 iPhone 上的 Google Chrome 浏览器无法正常工作

sencha touch 之carousel