Appearance

目录

ViewPager ​

说明 ​

可自动轮播滚动的翻页组件。

样式 ​

除支持 通用布局样式 和 通用视图样式 以外，还支持以下样式：

属性名类型默认值说明示例
borderRadiusnumber|string0整个ViewPager的圆角半径borderRadius: 4
itemSpacingnumber|string0两个page之间的距离itemSpacing: 4
edgeSpacingnumber|string0正中间的page离手机边缘的距离
item宽度 = ViewPager.width - edgeSpacing * 2		edgeSpacing: 4
canLoopbooleanfalse是否可以无限循环canLoop: true
autoPlaybooleanfalse是否自动播放autoPlay: true
loopIntervalnumber0自动轮播的时间间隔，单位ms（0时autoPlay失效）loopInterval: 2000
scaleFactornumber0.85当前元素前后两个的缩放比例scaleFactor: 0.6
alphaFactornumber0.5当前元素前后两个的透明度alphaFactor: 0.6

属性 ​

除支持 通用视图属性 以外，还支持以下属性：

属性名类型默认值说明示例
dataArray<Object>数据源（不设置自定义View时，可以直接传图片url数组作为数据源）详见下面 示例

方法 ​

js
/**
 * 设置当前显示的页面
 *
 * @param position 当前显示页面的位置
 */
setCurrentItem(position: number);
js
/**
 * 设置ViewPager翻页时的回调
 *
 * @param callback 回调。参数：current:当前位置； total:item总个数
 */
onPageChange(callback: (current: number, total: number) => void);
js
/**
 * 设置ViewPager页面被点击的回调
 *
 * @param callback 回调。参数：参数position:页面的位置
 */
onItemClick(callback: (position: number) => void);
js
/**
 * 设置ViewPager页面自定义View创建和更新的回调
 *
 * @param callback 回调。参数position:当前位置；view:当前控件，当view为null时说明要创建view。最后返回view。
 */
onItemView(callback: (position: number, view: View) => View);

示例 ​

js
let data = [
    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3207781657,3460758070&fm=27&gp=0.jpg',
    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2735633715,2749454924&fm=27&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3464499095,1074840881&fm=27&gp=0.jpg',
]

let pager = new ViewPager();
pager.style = {
    width: Hummer.env.availableWidth,
    height: 170,
    itemSpacing: 20,
    edgeSpacing: 40,
    canLoop: true,
    autoPlay: true,
    loopInterval: 2000,
    // borderRadius:20,
};
pager.onPageChange((current, total) => {
    console.log((current + 1) + "/" + total);
});
pager.onItemClick((position) => {
    console.log("click position: " + position);
});

// 自定义View内容
pager.onItemView((position, view) => {
    let image = view;
    if (!image) {
        image = new Image();
        image.style = {
            resize: 'cover',
            borderRadius: 20,
        }
    }
    image.src = data[position];
    return image;
});

// 设置数据源（不设置自定义View时，可以直接传图片数组作为数据源）
pager.data = data;