Error 404 Not Found
HTTP ERROR 404
Problem accessing /show/cmbyrkoig9Ap3eKI.html. Reason:
Not FoundPowered by Jetty://【科比标志】_科比标志品牌/图片/价格_科比标志批发_阿里巴巴
您可能还感兴趣的其他内容
阿里巴巴中国站和淘宝网会员帐号体系、《阿里巴巴服务条款》升级，完成登录后两边同时登录成功。支付宝小程序
开放了好几次的支付宝小程序，终于在昨天818开启了公测，今天一早起来，看了下以及demo，再与微信小程序的开发文档比较一下，发现好像就是copy的啊，然后在知乎上就看到，瞬间秒懂了。api接口也就是将wx改成了my，wcss、wxml改成了acss、axml，基础组件基本一样，基本上学了一个另一个也就明了，不过支付宝小程序多了几个业务组件，这几个封装的就比较实用,大概如下：
一：折叠面板。
axml:跟官网不同的是又增加了content的列表循环，基本上一看就知道了。
&view class=&a-collapse&&
&view a:for={{panels}}&
class=&a-collapse-title&
onTap=&{{onTitleTap}}&
data-index={{index}}
{{item.title}}
&view class=&{{item.expanded ? 'a-collapse-title-arrow a-collapse-title-arrow-up' : 'a-collapse-title-arrow'}}& /&
&view class=&a-collapse-content& a:if={{item.expanded}}&
&view class=&a-collapse-content& a:for={{item.content}}&
&/view&acts:
.a-collapse {
border-top: 1px solid #
background-color: #
color: #000;
.a-collapse-title,
.a-collapse-content {
border-bottom: 1px solid #
.a-collapse-title {
height: 88
line-height: 88
padding: 0 60rpx 0 30
font-size: 34
.a-collapse-title-arrow {
height: 30
background-image: url(&data:image/svg+charset=utf-8,&svg width='16' height='26' viewBox='0 0 16 26' xmlns='http://www.w3.org/2000/svg'&&path d='M2 0L0 2l11.5 11L0 24l2 2 14-13z' fill='%23C7C7CC' fill-rule='evenodd'/&&/svg&&);
background-size:
background-repeat: no-
background-position: 50% 50%;
transform: rotate(90deg);
.a-collapse-title-arrow-up {
transform: rotate(270deg);
.a-collapse-content {
padding: 20
font-size: 30
}js:Page({
collapseData: {
onTitleTap: 'handleTitleTap',
panels: [{
title: 'Title 1',
content: ['Content 1','Content 2','Content 3','Content 4','Content 5'],
expanded: true,
title: 'Title 2',
content: ['Content 2'],
expanded: false,
title: 'Title 3',
content: ['Content 3'],
expanded: false,
title: 'Title 4',
content: ['Content 4'],
expanded: false,
title: 'Title 5',
content: ['Content 5'],
expanded: false,
title: 'Title 6',
content: ['Content 6'],
expanded: false,
title: 'Title 7',
content: ['Content 7'],
expanded: false,
title: 'Title 8',
content: ['Content 8'],
expanded: false,
handleTitleTap(e) {
const { index } = e.target.
const panels = this.data.collapseData.
// android does not supprt Array findIndex
panels[index].expanded = !panels[index].
this.setData({
collapseData: {
...this.data.collapseData,
panels: [...panels],
});二：下拉菜单：
&template name=&DropdownSelect&&
&view a:if=&{{listData}}& class=&a-dropdown-wrapper {{active ? 'expand' : ''}}&&
&view id=&a-dropdown-nav& class=&a-dropdown-nav&&
&block a:for={{listData}}&
class=&a-dropdown-nav-item {{ active && selectedNav ===index ? 'active' : ''}}&
hover-class=&a-dropdown-nav-item-hover&
onTap=&_onNavItemTap&
data-index={{index}}
&text&{{item.nav}}&/text&
&view class=&triangle&&&/view&
&scroll-view scroll-y=&{{true}}& class=&a-dropdown-contents&&
&block a:for={{listData}} a:for-item=&list& a:for-index=&parentIndex&&
&view hidden=&{{selectedNav !== parentIndex}}&&
&view class=&a-dropdown-list-items {{active? 'show' : ''}}&&
&block a:for={{list.data}} &
class=&a-dropdown-list-item {{index !== (list.data.length - 1) ? '': 'last'}}
{{index === list.selectedItem ? 'selected': ''}}&
hover-class=&a-dropdown-list-item-hover&
onTap=&{{list.onListItemTap || '_onListItemTap'}}&
catchTap=&{{list.onListItemTap || '_catchListItemTap'}}&
data-index={{index}}
data-parentIndex={{parentIndex}}
data-title={{item.title}}&
&view class=&a-dropdown-list-item-line
{{item.textMode ? 'a-dropdown-list-item-line-' + item.textMode : ''}}&&
&image a:if={{item.thumb}} class=&a-dropdown-list-item-thumb&
src=&{{item.thumb}}& mode=&scaleToFill& /&
&text class=&a-dropdown-list-item-content&&{{item.title}}&/text&
&view a:if={{item.extra}} class=&a-dropdown-list-item-extra& &{{item.extra}}&/view&
&view class=&a-dropdown-list-item-check&/&
&view class=&a-dropdown-list-item-bottom& /&
&/scroll-view&
&view class=&a-dropdown-placeholder&&&/view&
&view class=&a-dropdown-bg& onTap=&_catchBgTap&&&/view&
&/template&
acss：这里的background-image用的都是里的图标然后转化为svg的格式加载的。
.a-dropdown-wrapper {
flex-direction:
width: 100%;
height: 100
.a-dropdown-wrapper.expand {
height: 100%;
z-index: 99;
.a-dropdown-nav {
border-bottom: 1px solid #
background: #
min-height: 100
z-index: 99;
.a-dropdown-nav-item {
text-align:
height: 100
line-height: 100
.a-dropdown-nav-item-hover {
background: rgba(0, 0, 0, 0.03);
.a-dropdown-nav-item.active {
color: #f76a24;
.triangle {
height: 0;
border-left: 10r
border-right: 10r
border-top: 10rpx solid #000;
border-bottom: 0;
vertical-align:
display: inline-
.a-dropdown-nav-item.active .triangle {
border-bottom: 10rpx solid #f76a24;
border-top: 0;
.a-dropdown-contents {
max-height: 100%;
z-index: 2;
.a-dropdown-list-items {
height: 0;
background: #
z-index: 98;
.a-dropdown-list-items.show {
.a-dropdown-list-items .a-dropdown-list-item {
font-size: 30
line-height: 1.5;
color: #333333;
min-height: 88
align-items:
padding-left: 30
background: #
.a-dropdown-list-item.selected {
color: #f76a24;
.a-dropdown-list-item .a-dropdown-list-item-bottom {
width: 100%;
border-bottom: 1px solid #
bottom: 0;
.a-dropdown-list-item .a-dropdown-list-item-thumb {
height: 44
margin-right: 30
.a-dropdown-list-item .a-dropdown-list-item-line {
align-items:
align-self:
padding-right: 30
min-height: 88
.a-dropdown-list-item .a-dropdown-list-item-content {
font-size: .34
text-align:
line-height: 1.5;
text-overflow:
white-space:
padding-top: .14
padding-bottom: .14
.a-dropdown-list-item.last .a-dropdown-list-item-bottom {
border-bottom:
.a-dropdown-list-item .a-dropdown-list-item-line-wrap .a-dropdown-list-item-content {
white-space:
.a-dropdown-list-item.a-dropdown-list-item-hover {
background-color: #
.a-dropdown-list-item-check {
height: 35
margin-left: 16
background-image: url('data:image/svg+charset=utf-8,&svg t=&7& class=&icon& style=&& viewBox=&0 0 & version=&1.1& xmlns=&http://www.w3.org/2000/svg& p-id=&1435& xmlns:xlink=&http://www.w3.org/1999/xlink& width=&350& height=&350&&&defs&&style type=&text/css&&&/style&&/defs&&path d=&M824.144 429.208l-190.064c-8.68-20.68-28..04 0 28. 204.8c3.6 9.64 14.64s10.04 14.64l409.6-409.6c8.68 8.04 0-28.536 291.816 299.58144z& p-id=&1436& fill=&#f76a24&&&/path&&/svg&');
background-size:
background-repeat: no-
background-position: 50% 50%;
transition: transform 0.3s;
visibility:
.a-dropdown-list-item.selected .a-dropdown-list-item-check {
visibility:
.a-dropdown-placeholder {
min-height: 150
z-index: 1;
.a-dropdown-bg {
opacity: 0;
transition: opacity linear 0.1s;
.expand .a-dropdown-bg {
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
opacity: 0.4;
z-index: 1;
三：通用的错误页：这没什么好说的，看图就知道了。
四：宫格
&view class=&grid&&
&block a:for=&{{list}}&&
style=&width:{{100/(columnNum || 4)}}%;padding-top:{{100/(columnNum || 4)}}%;&
class=&grid-item& onTap=&handleItemTap&
data-index={{index}}&
&view class=&grid-item-wrapper&&
&image src=&{{item.icon}}& class=&grid-icon& mode=&aspectFit& /&
&text class=&grid-text&&{{item.text}}&/text&
&/view&acss：
flex-direction:
flex-wrap:
.grid-item {
text-align:
background-color:
.grid-item-wrapper {
width: 100%;
height: 100%;
justify-content:
align-items:
flex-direction:
.grid-icon {
width: 30%;
height: 30%;
.grid-text {
color: #000;
font-size: 28
line-height: 1;
margin-top: 28
}j s:Page({
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &1&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &2&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &3&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &4&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &5&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &6&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &7&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &8&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &9&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &10&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &11&
&icon&: &/rmsportal/HMVRwQoJUDyxZVkTyIqF.png&,
&text&: &12&
columnNum: 4
handleItemTap(e) {
my.showToast({
content: `第${e.currentTarget.dataset.index}个Item`,
success: (res) =& {
})五：列表：基本上个人中心啊设置啊这些界面就用这个就够了。
&scroll-view scroll-y&
&view class=&a-list&&
&block a:if={{header}}&
&view class=&a-list-header&&{{header}}&/view&
&view a:if={{data}} class=&a-list-items&&
&block a:for={{data}}&
class=&a-list-item {{index !== (data.length - 1) ? '': 'last'}}
am-list-item-{{item.align || 'middle'}}&
hover-class=&a-list-item-hover&
onTap=&{{onItemTap}}&
data-index={{index}}
&view class=&a-list-item-line {{item.textMode ? 'a-list-item-line-' + item.textMode : ''}}&&
&image a:if={{item.thumb}} class=&a-list-item-thumb& src=&{{item.thumb}}& mode=&scaleToFill& /&
&text class=&a-list-item-content&&{{item.title}}&/text&
&view a:if={{item.extra}} class=&a-list-item-extra& &{{item.extra}}&/view&
&view a:if={{item.arrow}} class=&a-list-arrow a-list-arrow-{{item.arrow}}& /&
&view class=&a-list-item-bottom& /&
&/scroll-view&
box-sizing: border-
.a-list .a-list-header {
padding: 30rpx 30rpx 18
font-size: 28
color: #888;
display: inline-
width: 100%;
box-sizing: border-
.a-list .a-list-items .a-list-item {
font-size: 30
line-height: 1.5;
color: #333333;
min-height: 88
align-items:
padding-left: 30
background: #
.a-list .a-list-item .a-list-item-bottom {
width: 100%;
border-bottom: 1px solid #
bottom: 0;
.a-list .a-list-item .a-list-item-thumb {
height: 44
margin-right: 30
.a-list .a-list-item .a-list-item-line {
align-items:
align-self:
padding-right: 30
min-height: 88
.a-list .a-list-item.am-list-item-top .a-list-item-line {
align-items: flex-
.a-list .a-list-item.am-list-item-middle .a-list-item-line {
align-items:
.a-list .a-list-item.am-list-item-bottom .a-list-item-line {
align-items: flex-
.a-list .a-list-item .a-list-item-content {
color: #000;
font-size: .34
text-align:
line-height: 1.5;
text-overflow:
white-space:
padding-top: .14
padding-bottom: .14
.a-list .a-list-item.last .a-list-item-bottom{
border-bottom:
.a-list .a-list-item .a-list-item-extra {
flex-basis: 36%;
color: #888;
font-size: 32
text-align:
line-height: 1.5;
text-overflow:
white-space:
padding-top: .14
padding-bottom: .14
.a-list .a-list-item .a-list-item-line-wrap .a-list-item-content, .a-list .a-list-item .a-list-item-line-wrap .a-list-item-extra {
white-space:
.a-list .a-list-item.a-list-item-hover {
background-color: #
.a-list .a-list-arrow {
height: 30
margin-left: 16
background-image: url('data:image/svg+charset=utf-8,&svg width=&16& height=&26& viewBox=&0 0 16 26& version=&1.1& xmlns=&http://www.w3.org/2000/svg& xmlns:xlink=&http://www.w3.org/1999/xlink&&&g id=&UI-KIT_基础元件& stroke=&none& stroke-width=&1& fill=&none& fill-rule=&evenodd&&&g id=&9.9基础元件& transform=&translate(-, -)& fill=&#C7C7CC&&&polygon id=&Disclosure-Indicator& points=&09
06 25 8495&&&/polygon&&/g&&/g&&/svg&');
background-size:
background-repeat: no-
background-position: 50% 50%;
visibility:
transition: transform 0.3s;
.a-list .a-list-arrow.a-list-arrow-horizontal {
visibility:
.a-list .a-list-arrow.a-list-arrow-vertical {
visibility:
transform: rotate(90deg);
.a-list .a-list-arrow.a-list-arrow-vertical-up {
visibility:
transform: rotate(270deg);
listData: {
onItemTap: 'handleListItemTap',
header: 'list1',
title: '标题文字',
extra: '基本使用'
thumb: '/rmsportal/NTuILTPhmSpJdydEVwoO.png',
title: '标题图片',
arrow: 'horizontal',
title: '标题文字',
arrow: 'horizontal',
extra: '带箭头'
thumb: '/rmsportal/NTuILTPhmSpJdydEVwoO.png',
title: '标题文字',
arrow: 'horizontal',
extra: '完整使用'
title: '标题文字不换行很长很长很长很长很长很长很长很长很长很长',
arrow: 'horizontal',
title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
arrow: 'horizontal',
textMode: 'wrap'
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '没有箭头',
textMode: 'wrap'
title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
extra: '子元素垂直对齐',
textMode: 'wrap',
align: 'top'
handleListItemTap(e) {
my.showToast({
content: `第${e.currentTarget.dataset.index}个Item`,
success: (res) =& {
})六：标签：demo里只有3个标签，如果加多了的话，就不适用了，这里只需要将外层的display：flex，改成 flex
&view class=&container&&
&view class=&mt-24&&&text&事故类别：&/text&&/view&
&view class=&tag-list&&
&block a:for=&{{tags}}&&
&view class=&a-tag {{props.selected ? 'a-tag-active' : 'a-tag-normal'}}& onTap=&{{props.onChange}}& data-selected=&{{props.selected}}&&
&text class=&tag&&{{props.label}}&text&
&view class=&mt-24&&
&text&您选择的是: {{selectedLables}}&/text&
display: inline-
font-size: 28
text-align:
padding: 0 30
height: 50
line-height: 50
border-radius: 6
box-sizing: border-
margin: 20
.a-tag-normal {
background-color: #
color: #888;
border: 1px solid #
.a-tag-active {
background-color: #
color: #108ee9;
border: 1px solid #108ee9;
}.container {
padding: 0 20
margin-top: 24
.tag-list {
//display:
将这里去掉就好了
//justify-content: space-
flex-wrap:
margin-top: 24
selectedLables: ',疾病医疗,',
label: '意外医疗',
selected: false,
onChange: 'onTagChange1',
label: '疾病医疗',
selected: true,
onChange: 'onTagChange2',
label: '疾病住院',
selected: false,
onChange: 'onTagChange3',
label: '疾病住院',
selected: false,
onChange: 'onTagChange4',
label: '疾病住院',
selected: false,
onChange: 'onTagChange5',
label: '疾病住院',
selected: false,
onChange: 'onTagChange6',
label: '疾病住院',
selected: false,
onChange: 'onTagChange7',
label: '疾病住院',
selected: false,
onChange: 'onTagChange8',
onTagChange1(e) {
this.onTagChange(e.target.dataset.selected, 0);
onTagChange2(e) {
this.onTagChange(e.target.dataset.selected, 1);
onTagChange3(e) {
this.onTagChange(e.target.dataset.selected, 2);
onTagChange4(e) {
this.onTagChange(e.target.dataset.selected, 3);
onTagChange5(e) {
this.onTagChange(e.target.dataset.selected, 4);
onTagChange6(e) {
this.onTagChange(e.target.dataset.selected, 5);
onTagChange7(e) {
this.onTagChange(e.target.dataset.selected, 6);
onTagChange8(e) {
this.onTagChange(e.target.dataset.selected, 7);
onTagChange(selected, index) {
const tempTag = [].concat(this.data.tags);
tempTag[index].selected = !
const labels = tempTag.map((item) =& item.selected ? item.label : '').join(',');
this.setData({
tags: tempTag,
selectedLables: labels,
以上几个都是常用到的模板，具体模板在，下载就可以了。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：103370次
积分：1567
积分：1567
排名：千里之外
原创：61篇
转载：13篇
评论：13条
(1)(1)(3)(1)(6)(16)(1)(1)(2)(9)(2)(4)(22)(3)(2)标签：至少1个，最多5个
是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。）
Iconfont提供以下功能：
在线图标搜索
图标分捡下载
矢量格式转换
图标库管理
iconfont的优势
自由变化大小（高清屏无压力）
自由修改颜色（纯色）
可以添加一些视觉效果如：阴影、旋转、透明度
iconfont使用
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
.iconfont{font-family:"iconfont";
font-size:16font-style:}
选择图标、获取字体编码，应用于页面
&i class="iconfont"&&#33&/i&
Android应用
复制字体文件到项目 assets 目录
打开 iconfont 目录中的 demo.html，找到图标相对应的 HTML 实体字符码
打开 res/values/strings.xml，添加 string 值
&string name="icons"&㘅 &#x35 &#x35 &#x35&/string&
打开 activity_main.xml，添加 string 值到 TextView
android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/icons" /&
为 TextView 指定文字
import android.graphics.T
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
TextView textview = (TextView)findViewById(R.id.like);
textview.setTypeface(iconfont);
将字体文件(.tff)添加到工程中
打开Info.plist文件，增加一个新的Array类型的键，键名设置为UIAppFonts（Fonts provided by application），增加字体的文件名：iconfont.ttf
UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
label.font =
label.text = @"\U \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
[self.view addSubview: label];
创建 UIFont 使用的是字体名，而不是文件名
可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码
iconfont制作
如果图标库里没有合适的图标，你可以自行制作，然后将SVG文件上传到。
1 收藏&&|&&19
你可能感兴趣的文章
21 收藏，7.3k
84 收藏，3k
33 收藏，1.4k
前端人员大爱
确切的说阿里巴巴iconfont平台矢量图标量已经超过7000个；只是很多是不公开的，需要用户通过搜索的形式才能找到。
感谢指出。（不公开的原因是什么呢？
因为这些内容是用户自主上传的，我们不确定用户是否愿意公开他们原创的图标~~~
明白了。我会修改文章。谢谢。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：}