快应用

Appearance

ES扩展组件 ​

扩展组件是终端提供了一些很方便的组件。

scroll-view ​

普通滚动组件，列表类型建议使用ul。

事件 ​

事件描述类型
scroll当触发 ScrollView 的滑动事件时回调，在 ScrollView 滑动时回调。 Event.offsetX(x轴坐标)、Event.offsetY(x轴坐标)Function

方法 ​

scrollTo ​

(xOffset: number, yOffset: number: duration: number) => void 通知 ListView 滑动到某个具体坐标偏移值(offset)的位置。

  • xOffset: number - 滑动到 X 方向的 offset
  • yOffset: numbere - 滑动到 Y 方向的 offset
  • duration: number - 多长事件滚到指定位置

qr-view ​

该组件实现二维码的显示。

参数 ​

参数描述类型
content二维码显示的内容string
optimize是否优化显示二维码boolean
optimize 默认是false，如果在考虑效率优先的情况下可以设置为true，分辨率会优化40%。

示例：

点击查看源码
vue
 <qr-view style="width:200px; height:200px;" content="http://www.xxxx.com/"/>

img-transition ​

实现背景的动画渐变效果。

参数 ​

参数描述类型
transitionTime过渡的时间,单位毫秒int
fullQuality是否使用高质量图片boolean

方法 ​

  • setNextImage(string) 过渡到图片(Uri）
  • setNextColor(string) 过渡到颜色（Color)

示例：

点击查看源码
vue
 <img-transition ref="bg" style="width:1920px; height:1080px;" :transitionTime=1000 />
点击查看源码
js
 this.$refs.bg.setNextImage('http://fitimg.fangtangtv.com/tab/tab1block1-1bg.jpg');
 this.$refs.bg.setNextColor('#5309F0');
 this.$refs.bg.setNextColor(0); // 透明

loading-view ​

加载的圆形loading样式。

参数 ​

参数描述类型
color颜色值,标准16进制写法，例如#FFFFFFstring

示例：

点击查看源码
vue
 <loading-view color="#0000FF" style="width: 120px;height: 120px;" v-if="needShowLoading"/>

text-view ​

[详细示例：text-view.vue] 文本组件，封装系统自有的文本组件。主要用来实现展示html文本及文本滚动。

参数 ​

参数描述类型
fontSize文本大小int
text文本内容，内容中加入font标签可设置不用样式文字int
*ellipsizeMode文本超出范围后的显示方式int
lines文本展示行数int
maxLines文本展示最大行数int
color文本颜色string
select设置选中状态，当ellipsizeMode设置为marquee时，若此值为true，可实现一直滚动boolean
*gravity设置对齐方式string
*showOnState根据状态设置是否可见enum
  • ellipsizeMode 的参数含义:
    • 0：文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 Text 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；
    • 1："文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”
    • 2：文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”；
    • 3：以滚动的方式显示
  • gravity 的参数含义:
    • center : 居中
    • top ： 居上
    • bottom ：居下
    • end ：居尾部
    • centerHorizontal ：水平居中
    • centerVertical ：垂直居中
    • start ：居前

注意gravity可通过|的方式添加多种对齐方式，比如:centerHorizontal|bottom 实现水平居中，并且垂直居下.

示例：

点击查看源码
html

<text-view class="text-view" :focusable=false :select="true" maxLines="1" ellipsizeMode="3">这是超出后可以滚动的文本这是超出后可以滚动的文本
</text-view>
<text-view class="text-view" text='<font color="#fa668e">颜色</font>普通文字'></text-view>
  • showOnState 相应焦点状态时显示，三个状态一组使用。
  • normal: string - 正常 ；
  • focused: string - 焦点 ；
  • selected: string - 选中，在ul组件中生效，移出ul时触发，如果不需要selected状态，ul标签中添加:enableSelectOnFocus="false" ；

seek-bar ​

[详细示例：progress.vue]

可拖动进度条

参数 ​

参数描述类型
progress当前进度int
secondProgress第二段进度int
maxProgress总进度int
barHeight进度条高度int
thumbWidth滑块宽度int
thumbHeight滑块高度int
backgroundColor总进度条颜色string(#aarrggbb)
progressColor当前进度条颜色string(#aarrggbb)
thumbColor滑块颜色string(#aarrggbb)
listenProgress是否开启监听seek-change回调，默认falseboolean

事件 ​

事件名称描述类型
seek-change当用户拖动进度条时，会执行此回调函数。Function

示例：

点击查看源码
html

<seek-bar
        :focusable="true"
        :maxProgress="100"
        :progress="50"
        :barHeight="6"
        :thumbWidth="35"
        :thumbHeight="35"
        backgroundColor="#40ffffff"
        progressColor="#60ffffff"
        thumbColor="#ffffff"
        :listenProgress="true"
        @seek-change="onSeekChange"
        name="progress"
        @focus="focusChange"
/>
点击查看源码
javascript
onSeekChange(e)
{
    console.log(`seekBar onSeekChange fromUser:${e.fromUser},left:${e.pLeft},right:${e.pRight},state:${e.state}`);
}

cover-flow ​

[详细示例：cover-flow.vue]

轮播图组件

参数 ​

参数描述类型
isVertical是否是竖向，默认falseboolean
autoScrollInterval自动滚动事件间隔，0：不自动滚动int
zoomInValue放大倍数，值为1时是原大小int

事件 ​

事件名称描述类型
scroll滚动时会执行此回调函数。Function

方法 ​

  • getCurrentIndex(function) 获取当前选中index(回调）
  • scrollToIndex(int, int) 滚动到第几个（index, 过度时间)

示例：

点击查看源码
html

<cover-flow class="cf_vertical" :clipChildren="false" :zoomInValue="1.3" :autoScrollInterval="2000" :isVertical="true">
    <div class="scrollChild"> <!--.scrollChild { display: flex; flex-direction: column; } 竖向的scrollChild需要加这两个css -->
        <img src="http://test-mp.hiliad.com/static/taobao/pic1.png">
        <img src="http://test-mp.hiliad.com/static/taobao/pic2.png">
        <img src="http://test-mp.hiliad.com/static/taobao/pic3.png">
    </div>
</cover-flow>