3.接着进入页面文件夹assets就是放css静态图片的。index.common.css就是页面reset的css之类的(***.common.css的后缀打包不会加hash码),其余的是入口文件.
setMask(0) //调用(number,表示弹出第几个弹窗)
setMask(null) //关闭
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
children | dom | null | 就是内容 | 是 |
setDrawer(0) //调用(number,表示弹出第几个弹窗)
setDrawer(null) //关闭
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
children | dom | null | 就是内容 | 是 |
setToast(123) //调用
setMsg(123) //调用
setLoading(true) //打开
setLoading(false) //关闭
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
_show | bool | true | 是否显示(false表示不显示) | 是 |
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
className | string | null | 就是clasName | 是 |
children | dom | null | 就是内容 | 否 |
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
svga | string | null | svga文件 | 是 |
loop | number | boolean | 1 | |
fillMode | string | forwards | 类似与anima的fillMode属性 | 否 |
利用react-hook外加简单的css控制,制作一个简易的swiper组件。
<Swiper
autoplay={1000}
loop={false}
min={20}
changeIndex={(e) => { console.log(e) }}
>
<div>1</div>
<div>2</div>
</Swiper>
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
autoplay | number | 86400000 | 自动切换时间 | 否 |
loop | bool | true | 让Swiper看起来是循环 | 否 |
min | number | 10 | 最小滑动距离(滑动大于此值时切换) | 否 |
changeIndex | func | null | 返回当前的index | 否 |
noTouch | bool | false | 禁止触碰 | 否 |
init | number | 1 | 初始位置 | 否 |
changeMove | array | [] | 修改位置(一个数值位置以及一个改变的值) | 否 |
前端官方常用的swiper组件库
<SwiperItem>
<div>1</div>
<div>2</div>
</SwiperItem>
一个非常简单的图片播放组件(固定25帧动画,有需要请在组件内修改)。
<Anima imgNumber={125} path='index/assets/anima/' play={anima} callback={() => { console.log('end') }} />
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
imgNumber | number | 无 | 图片的数量 | 是 |
path | string | 无 | 图片的路径(需要带上当前目录,图片名字是数字下标加.anima的png文件才行) | 是 |
paly | bool | 无 | 播放按钮 | 是 |
initNumber | number | 0 | 动画图片的起始位置 | 否 |
callback | func | null | 结束执行的函数 | 否 |
width | number | null | canvas宽 | 否 |
height | number | null | canvas长 | 否 |
播放mp4的组件
<Video src={mp4Src} />
参数名字 | 值类型 | 默认值 | 说明 | 是否必需 |
---|---|---|---|---|
src | string | 无 | mp4的路径 | 是 |