1.地址

一只基于Vue2.x的移动端&微信UI。 -YDUI Touch

2.在你的项目中安装引用该UI。要注意你要使用px还是rem，按照需求引用。

3.UI使用ydui.flexible.js 来处理移动端自适应问题。

3.1，rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = .32rem】
3.2，设计稿宽度默认为750px
3.3，在使用border，baskground-size,transform时需要用到的尺寸不需要更改为rem，直接使用px即可 【例：5像素红色边框：border：5px red solid；】
3.4，写死viewport，采用scale=1.0，IOS和安卓一视同仁；

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>

3.5，1px边框的使用

/*css*/
-webkit-transform:(scale(0.5));-webkit-transform-origin: 0 0;transform:(scale(0.5));transform-origin: 0 0;

3.6，关于图片，纯色系图片建议使用字体图标，比如用iconfont；如果是复杂多颜色图片，可以使用单张图片，切记不要使用雪碧图。

4，关于布局的layout

image.png

默认是这样的，但是需要注意几点：
4.1，当你单页面不足充满整个页面，你需要在<layout></layout>上在添加一个div,来保证你的页面能正常滚动。

<template>
    <div style="height: 100%;">
        <yd-layout title="...">...</yd-layout>
    </div>
</template>

4.2，当你在写内页时，没有头部菜单<yd-navbar></yd-navbar>和底部菜单<yd-tabbar></yd-tabbar>时，你需要悬浮在页面底部的按钮，使用fixed的时候，你要注意不能在使用layout布局
安卓手机上显示正常，苹果手机会有伸缩问题。

4.3，你在写底部悬浮的时候，需要在底部空出一块地方，一般解决方法是使用padding-bottom或者是margin-bottom。但是有时候会出现问题（一般是苹果手机出现问题），最好的方式是在悬浮层的上面增加一个空白div，就显示高度，例如：

div{width:100%;height:5rem;background:transparent;}

5，按钮：Button

1.没有搞清楚yd-button-group【slot】-name的含义
2.button中的props里面的bgcolor和color的类型是string和常规颜色值。但是不包括透明颜色值，例如transparent和#00000000表示。
3.假如你需要一个图文结合的按钮，建议你自己写一个。

6，角标：Badge

表现形式和按钮类似，当你有一些提示文字时，建议使用角标。

7,关于组件，组件是不能嵌套的，例如搜索Search组件

在<yd-list></yd-list>中增加search组件，会出现页面穿透的现象，

image.png image.png
image.png

但是：

image.png
image.png
image.png

具体是什么原因暂时没有弄明白。