Appearance

目录

<ex-viewpager> ​

<ex-viewpager>是Tenon中视图轮播组件

属性 ​

属性名类型默认值说明
dataArray[]绑定的数据结构
itemSpacingNumberString0
edgeSpacingNumberString0
scaleFactorNumber1前后Item放缩的比例
alphaFactorNumber1前后Item透明度的比例
canLoopBooleanfalse是否可以无限循环
autoPlayBooleanfalse是否自动播放(允许自动播放时，必须设定loopInterval属性)
loopIntervalNumber0自动轮播的时间间隔，单位ms（0时autoPlay失效）

样式 ​

事件 ​


itemClick ​

备注：View Item点击事件

参数：@param(position)

属性名类型说明示例
positionNumber当前索引position:0

pageChange ​

备注：页面改动事件

参数：@param(current,total)

属性名类型说明示例
currentNumber当前索引current:0
totalNumber总页数total:0

pageScroll ​

备注：页面改动事件

参数：@param(position,percent)

属性名类型说明示例
positionNumber当前索引position:0
percentNumber当前滚动的百分比（0~1）percent:0

示例 ​


Tenon Vue ​

javascript
// entry.js
import Tenon from '@hummer/tenon-vue';

import app from './app.vue';
import ViewPager from '@hummer/vue-plugin-viewpager';

Tenon.register(ViewPager);
Tenon.render(app);
html
<!-- App.vue -->
<template>
  <ex-viewpager
    class="banner"
    ref="viewpager"
    :data="list"
    :itemSpacing="10"
    :edgeSpacing="50"
    :scaleFactor="0.99"
    :alphaFactor="1"
    @itemclick="handleItemClick"
    @pageChange="handlePageChange"
    @pageScroll="handlePageScroll"
    @pageScrollStateChange="handlePageScrollStateChange"
  >
    <template v-slot:item="item">
      <view class="banner-item" @tap="handleClickTap(item)">
        <text class="banner-item-index">Index: {{ item.index }}</text>
        <image class="banner-image" :src="item.data.url"></image>
      </view>
    </template>
  </ex-viewpager>
</template>
<script>
  const ImageData = [
    "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",
  ];
  export default{
    data(){
      return {
        list: Array.apply(null, new Array(3)).map((item, index) => {
          return {
            url: ImageData[2 - (index % 3)],
            index: index,
          };
        }),
      }
    },
    methods: {
      handleClickTap(data) {
        console.log("Data", data);
      },
      handleItemClick(position) {
        console.log("Item Click", position);
      },
      handlePageChange(current, total) {
        console.log("Page Change", current, total);
      },
      handlePageScroll(position, percent) {
        console.log('Page Scroll', position, percent)
      },
      handlePageScrollStateChange(state) {
        console.log("Page Scroll State", state);
      },
    }
  }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

支持中