sanyuequi v1.1.0

安装 & 使用

npm i save sanyuequi

import { 
  App,
  View,
  Text,
  Button,
  LoadIcon,
  ScrollView,
  Img,
  ListView } from 'sanyuequi'

组件说明

View组件

整个框架的基础，所有元素都可以用它来替代。
在CSS上对它进行了一些设置，这些设置都是移动端上不需要的：禁止了选择，使用合理的盒子模型以及取消了点击高亮的情况。

  user-select: none;
  box-sizing: border-box;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

在JS上也进行了一些封装。使用它的时候很简单只需要传入以下属性去使用即可

Prop

App组件

整个 App 组件是覆盖我们浏览器的可视窗口并且是不可滚动的，该组件是整个页面的 root ，使用这个组件会对浏览器作出一些限制和帮助。
为了统一所有浏览器下的滚动以及避免一些浏览器下原生滚动的一些缺陷，我们舍弃了浏览器原生的滚动，这意味着你需要引入我们提供的 ScrollView ： 舍去原生的滚动功能，引入用一个相对耗费性能的组件来取代，这样我们能更好的滚动以及更好的控制滚动。

Prop

全局函数

引入了 App 组件之后，我们可以使用一些预设的提示样式，只要访问全局对象 window.Qapp 即可使用。（需要注意的是，这些预设函数涉及到 dom 节点的生成，所以必须在 componentDidMount 下使用）

1. 加载遮罩（load mask）

由 bashowLoad(object) 和 hideLoad()来控制出现和消失。

object 参数

2. toast 遮罩（toast mask）

由 window.Qapp.showToast(object) 来控制出现，在指定时间之后消失。

object 参数

3. alert 遮罩（alert mask）

由 window.Qapp.showAlert(object) 来控制出现，在用户操作后消失。

object 参数

3. copy 函数（copy function)

由 window.Qapp.copy(object) 来把指定的字符设置进剪切板中。其中 object 的属性主要是： | 名字 | 值类型 | 默认值 | 说明 | 是否必需 | |---------|---------|--------- |---------|---------| | text | string | "" | 需要复制的文字 | 是| | success | func | null | 成功回调，第一个参数是当前需要复制字符串 |否| | error | func | null | 失败回调，第一个参数是当前需要复制字符串 |否|

ScrollView组件

该组件是为了更好的滚动而存在的，在使用它之前请确认根组件是 noSysScroll:true 的 App 组件。
需要注意的是该组件，必须设定宽高（横向滚动需要设置宽度，纵向滚动需要设置高度）。
由于 ScrollView 继承 View 所以View组件的属性，它都可以使用，以下列举的是它自身独有的属性。

Prop

ListView组件

ListView 为 ScrollView 的拓展。主要是为了需要使用下拉刷新，到底加载更多这些功能而存在的。目前只支持 column 方向。

Prop

Text组件

和 ```View``` 很像，但是它点击能复制当前标签内的值，只是用于文字的展示，而且也不能嵌套使用。但如果需要点击复制的文字，就使用 标签。（注：部分安卓浏览器无法禁止长按复制文字）

Prop

Button组件

继承自 View 组件，为了方便点击时候样式切换而存在的。

Prop

Img组件

图片组件

Prop

C: center ; L: left ; R: right

utils

工具箱

loadImage

const res = await loadImage(src) // success:true &  error: false

supportWebp

const res = await supportWebp(src) // success:true &  error: false

例子

1. 每个组件的简单使用
2. ScrollView 的几种排列样式
3. ListView 的几种排列样式

todo

1. Swiper