# 场景

# 说明

场景模块，涉及到交互，业务等比较典型的功能；包括滚动条滚动，触底加载，列表分页等；导出模块名为scene

导入模块

import { scene } from 'gx-instant'

# 方法

# scrollTop

说明：使浏览器元素滚动到顶部

参数
- selector：string | Element 元素选择器或元素
- behavior：string 滚动效果，smooth（默认）：平滑过渡，auto：自动选择过渡，none：无过渡

# scrollTo

说明：使浏览器元素滚动指定距离

参数
- selector：string | Element 元素选择器或元素
- distance：number 滚动距离，默认是0
- top：boolean 是否向上滚动，可选，默认是true，false为向下滚动
- behavior：string 滚动效果，取值：smooth（默认）：平滑过渡，auto：自动选择过渡，none：无过渡

# scrollInto

说明：使浏览器元素滚动指定距离

参数
- selector：string | Element 元素选择器或元素
- behavior：string 滚动效果，取值：smooth（默认）：平滑过渡，auto：自动选择过渡，none：无过渡

# addEventListener

说明：添加事件监听器

参数
- selector：string | Element 元素选择器或元素
- callback：Function 事件监听器回调
- type：string 事件类型，如：click、scroll、mouseover等，默认scroll
- delay：number 延迟执行毫秒数，可选，用于防抖，默认200毫秒
返回：Function 返回一个函数，用于卸载此方法添加的事件监听器

# reachBottomLoadMore

说明：触底加载更多

参数
- selector：string | Element 元素选择器或元素
- loadCallback：Function 到达触底后要执行的逻辑
- delay：number 延迟执行毫秒数，可选，用于防抖，默认200毫秒
- distance：number 规定达到“触底”标准的距离底部的距离
返回：Function 返回一个函数，用于卸载此方法添加的事件监听器

# isInViewport

说明：判断元素是否在当前视口内

参数
- selector：string | Element 元素选择器或元素
返回：boolean 判断结果

# isInElement

说明：判断元素是否在另一个元素可视区内

参数
- innerSelector：string | Element 判断的元素选择器或元素
- outerSelector：string | Element 被判断的元素选择器或元素
返回：boolean 返回innerSelector是否在outerSelector可视区内的判断结果

# isScrollReach

说明：判断元素是否在另一个元素可视区内

参数
- innerSelector：string | Element 判断的元素选择器或元素
- val： string | number 可选，默认是bottom；可选值top：顶部，bottom：底部，其他：距离底部的距离（单位px）
返回：boolean 判断结果

# isScrollBottom

说明：判断元素是否滚动到底部

参数
- selector：istring | Element 判断的元素选择器或元素
返回：boolean 判断结果

# isScrollTop

说明：判断元素是否滚动到顶部

参数
- selector：istring | Element 判断的元素选择器或元素
返回：boolean 判断结果

# pagination

说明：列表分页

参数
- list：Array 列表
- pageNum：number 页码可选参数，默认1
- pageSize：number 每页条数可选参数，默认10
返回：Object 分页数据对象，包含三个属性：list：分页后的列表，total：总条数，hasNext：是否还有下一页

示例

let list = [{
  name:'xiaoming'
},{
  name:'gx'
},{
  name:'tom'
},{
  name:'jane'
},{
  name:'kangkang'
}]
pagination(list,1,4) //返回{total: 5, list: [...], hasNext: true}

# setElementDraggable

说明：设置元素可拖拽

参数
- selector：string | Element 需要设置的元素选择器或元素
- behavior：string 定位类型，可选，默认absolute，可取值absolute，fixed
返回：Function 返回可卸载此功能的方法

提示：behavior实际上影响的是元素的position属性

# setElementFocus

说明：设置元素聚焦

参数
- selector：string | Element 需要设置的元素选择器或元素

# setElementCss

说明：设置元素css样式

参数
- selector：string | Element 需要设置的元素选择器或元素
- cssName：string css类名
- cssObj：string | Object 合法的样式字符串，合法的样式对象（小驼峰/中划线）
- scoped：boolean 是否为局部样式，可选，默认为true

提示：scoped设置为true，会在元素上生成一个唯一标志，使该样式只对该元素生效

# setElementStyle

说明：设置元素css样式

参数
- selector：string | Element 需要设置的元素选择器或元素
- styleObj：string | Object 合法的样式字符串，合法的样式对象（小驼峰/中划线）

# drawCircle

说明：绘制圆形

参数
- count：number 画圆数量
- start：Array<number> 绘制区域的左上角边界坐标，可选，默认[0, 0]
- end：Array<number> 绘制区域的右下角边界坐标，可选，默认[1920, 1080]
- radiusList：Array<number> 圆的半径取值列表，可选
- colorList：Array<string> 圆的颜色取值列表，可选
- labelList：Array<number> 圆内的文本取值列表，可选
- createDom：boolean 是否在方法内创建dom，为false，则返回创建的圆的类Dom，为true则在方法内生成dom并挂载，默认为true
- labelCanRepeat：boolean 圆内的文本是否可重复，可选，默认false；当为false时，count的值必须小于等于labelList的长度，否则抛出警告
- clickHandler：Function 圆被点击的回调，createDom为true时生效
返回：void | Array<Object> createDom为false时，返回圆的类Dom对象

# setRem

说明：设置rem

参数
- base：number 基准值，可选，默认1920
- ratio：number rem与px的比例，可选，默认100
返回：Function Function 返回一个卸载此功能的函数

示例：

un = setRem()
un()

# getRemPxRatio

说明：获取rem与px的比例

返回：number rem与px的比例

# rem2px

说明：rem转px

参数
- rem：number rem值
返回：number 转换的px值

# px2rem

说明：px转rem

参数
- rem：number px值
返回：number 转换的rem值

# copyClipboard

说明：复制内容到剪贴板

版本：0.0.7

参数
- text：string 要执行的方法或方法列表
- success：Function 复制成功的回调函数
- fail：Function 复制失败的回调函数
返回：Promise<any> 返回执行结果Promise，成功resole,失败reject

示例

copyClipboard('要复制的内容',{
  // 复制成功的回调函数
  success(){
    console.log("成功回调")
  },
  // 出现异常的回调函数
  fail(e){
    console.log("异常回调",e)
  }
})
//或者
copyClipboard('要复制的内容').then(res=>{console.log('成功回调')}).catch(e=>{console.log('异常回调')})

# data2Excel

说明：导出表格

版本：1.1.1

参数
- column：Object 格式如：{ text: '姓名', key: 'name' }，其中text为表格列名，key为数据中对应的字段名
- data：Array<Object> 数据信息格式如：[{ name: '张三'}]，key和column的key一一对应
- options：Object 表格配置项，格式{name,extension,colWidth,head,align}
- options.name：string 导出文件名，可选，默认为'导出表格'
- options.extension：string 导出文件格式，可选，默认xlsx，不能取值csv
- options.colWidth：number 列宽，可选，默认100px
- options.head：Array 表格的表头信息，可选，默认null
- options.align：string 表格内容对齐方式，可选，默认center，可取值left、center、right

示例：

//列配置
let column = [
  { text: '姓名', key: 'name' },
  { text: '身份证', key: 'personId' },
  { text: '手机号', key: 'phone' },
];

//表头配置
let headData = [
  { text: '幼儿园一年级' }
];

//数据
let data = [
  {
    name: '张三',
    personId: '12345601',
    phone: '15211112222',
  },
  {
    name: '李四',
    personId: '12345602',
    phone: '15211112222',
  },
  {
    name: '王五',
    personId: '12345603',
    phone: '15211112222',
  },
]
data2Excel(column, data)

← 优化随机性 →