fpx.js是一款
不依赖
任何库的移动端界面适配插件,可以自定义设计稿大小,让移动端的适配更加方便快捷!
fpx.js有自己独立的尺寸单位,使用fpx.js,将
不会
对您目前项目已有的UI产生
任何
影响!
fpx.js将会让您用
最少
的代码去体验效果
最强
的适配!
尺寸单位:
fpx
fpx.js对于
所有机型
默认的设计稿宽度都设置为
750fpx
,所以您在做界面适配的时候并不需要考虑当前机型的屏幕大小,只需要计算好整屏的宽度便可以,fpx.js已经为您
做好了一切!
NPM:
npm install fchany-fpx-vue --save
初始化方法:
import Vue from "vue";
import Fpx from "fchany-fpx-vue";
// options默认配置
const options = {
width: 750, // 设计稿尺寸
maxWidth: 750, // 最大尺寸
minWidth: 0, // 最小尺寸
baseStyle: { // 项目基础样式类
a: {
width: "750fpx",
height: "500fpx",
color: "red"
},
b: {
width: "375fpx",
height: "100fpx",
background: "blue"
}
}
}
Vue.use(Fpx, options); // options参数均为可选参数
<template>
<fpx :styles="styles">
<div class="children-a">我占一半的宽度</div>
<div class="children-b">我占一整屏的宽度</div>
</fpx>
</template>
<script>
export default {
data() {
return {
styles: {
"children-a": {
width: "375fpx",
height: "100fpx",
background: "red"
},
"children-b": {
width: "750fpx",
height: "100fpx",
background: "green"
}
},
}
}
}
</script>
建议把styles参数单独抽离,以免影响主逻辑代码
<template>
<fpx :styles="styles">
<div class="children-a">我占一半的宽度</div>
<div class="children-b">我占一整屏的宽度</div>
</fpx>
</template>
<script>
import styles from "./styles";
export default {
data() {
return {
styles: styles
}
}
}
</script>
export default {
"children-a": {
width: "375fpx",
height: "100fpx",
background: "red"
},
"children-b": {
width: "750fpx",
height: "100fpx",
background: "green"
}
}
// 元素关系嵌套写法
export default {
a: {
width: "750fpx",
height: "100fpx",
a1: {
width: "375fpx",
height: "100fpx",
a11: {
width: "375fpx",
height: "100fpx"
}
}
},
b: {
width: "750fpx",
height: "100fpx",
b1: {
width: "375fpx",
height: "100fpx",
b11: {
width: "375fpx",
height: "100fpx"
}
}
}
}
// 可以使用小驼峰命名规则定义css属性
fontSize、textAlign、marginLeft、paddingLeft、backgroundColor...
参数名 |
默认值 |
参数类型 |
作用 |
是否必填 |
styles |
{} |
Object |
设置该fpx组件下的样式 |
否 |
transition |
200 |
Number |
当fpx组件解析完styles属性之后,会有一个淡入效果,默认过渡时间为200ms
|
否 |
此组件作为fchany-fpx-vue版本的拓展组件
<template>
<fpx :styles="styles">
<fpx-list v-for="(item, i) in 50" :key="i">
<div class="list-item">{{item}}</div>
</fpx-list>
</fpx>
</template>
<script>
export default {
data() {
return {
styles: {
"list-item": {
height: "100fpx",
background: "pink",
margin: "10fpx 0",
textAlign: "center",
lineHeight: "100fpx"
}
},
}
}
}
</script>
参数名 |
默认值 |
参数类型 |
作用 |
是否必填 |
transition |
200 |
Number |
当fpxList组件进入可视区域之后,会有一个动画效果,默认过渡时间为200ms
|
否 |
type |
200 |
String |
元素进入可视区域的动画方式,可选left-in | bottom-in,默认为left-in
|
否 |