wxc-ep-slider

这个富交互体验组件依赖于 BindingX 特性，使用前请确定你的App 是否安装

Weex Binding 效果的 slider 组件

规则

  • 用于丰富 slide，包括商品橱窗，图片列表等
  • 假如子组件有点击事件，在 Android 由于 此约束，目前需要在子元素里面绑定对应事件，Weex Ui 提供了 wxc-pan-cell 包裹器来解决此情况，具体可参考 demo
  • 支持滑到最右时候显示加载更多和事件回调，需要传入 pull-more slot，详细可见 demo

Demo

wxc-ep-slider 神奇滑动 - 图1 <https://img.alicdn.com/tfs/TB1dzqbcuuSBuNjSsplXXbe8pXa-200-200.png" width="160"/>

使用方法

  1. <template>
  2.   <div class="wrapper">
  3.     <wxc-ep-slider :slider-id="sliderId"
  4.                    :card-length='cardLength'
  5.                    :card-s="cardSize"
  6.                    :select-index="2"
  7.                    @wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected">
  9.       <!--自动生成demo-->
  10.       <div v-for="(v,index) in [1,2,3,4,5]"
  11.            :key="index"
  12.            :slot="`card${index}_${sliderId}`"
  13.            :class="['slider',`slider${index}`]">
  14.         <text>这里是第{{index + 1}}个滑块</text>
  15.       </div>
  16.     </wxc-ep-slider>
  17.   </div>
  18. </template>
  20. <style scoped>
  22.   .wrapper {
  23.     padding-top: 100px;
  24.   }
  26.   .slider {
  27.     width: 400px;
  28.     height: 300px;
  29.     background-color: #C3413D;
  30.     align-items: center;
  31.     justify-content: center;
  32.   }
  34.   .slider1 {
  35.     background-color: #635147;
  36.   }
  38.   .slider2 {
  39.     background-color: #FFC302;
  40.   }
  42.   .slider3 {
  43.     background-color: #FF9090;
  44.   }
  46.   .slider4 {
  47.     background-color: #546E7A;
  48.   }
  49. </style>
  51. <script>
  52.   import { WxcEpSlider } from 'weex-ui';
  54.   export default {
  55.     components: { WxcEpSlider },
  56.     data: () => ({
  57.       sliderId: 1,
  58.       cardLength: 5,
  59.       cardSize: {
  60.         width: 400,
  61.         height: 300,
  62.         spacing: 0,
  63.         scale: 0.8
  64.       }
  65.     }),
  66.     methods: {
  67.       wxcEpSliderCurrentIndexSelected (e) {
  68.         const index = e.currentIndex;
  69.         console.log(index);
  70.       }
  71.     }
  72.   }
  73. </script>

更多详细情况可以参考 demo

可配置参数

Prop Type Required Default Description
slider-id Number Y 1 slider的id，避免页面多个ep-slider导致获取错误
card-length Number Y 1 slider中item的数量
select-index Number N 0 默认突出item的index
container-s Object Y {position: 'relative',width: 750,height: 352} 包裹容器的样式
card-s Object Y {width: 360,height: 300,spacing: 0,scale: 0.75} item容器的样式
auto-play Boolean N false 是否需要自动播放
interval Number N 1200 自动播放时候的间隔

渲染滑到最右时候的加载更多

  1. // 样式需要自己根据个数和长度计算，详细参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/ep-slider/index.vue) 代码
  2. <div class="more-slider" 
  3.      slot="pull-more" 
  4.      :style="{left: `${cardLength * (cardSize.width + cardSize.spacing)+60}px`,marginLeft:`${(750 - cardSize.width) / 2}px`}">
  5.       <text>加载更多</text>
  6. </div>

API说明

主动触发设置

  1. // 直接在wxc-ep-slider组件上面绑定ref="wxc-ep-slider",然后调用即可
  2. // 譬如设置第二张
  3. this.$refs['wxc-ep-slider'].manualSetPage(1);

Rebind

  1. //ios下当放在list中，cell被回收后，导致下次appear的时候，手势失效了，需要再手动调用api，重新绑定下pan事件,同时注意 setTimeout 一下
  2. // 直接在wxc-ep-slider组件上面绑定ref="wxc-ep-slider"
  3. this.$refs['wxc-ep-slider'].rebind();

事件回调

  1. //当前滑块被选中的回调
  2. `@wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected"`
  3. //滑到最右时候的事件回调
  4. `@@wxcEpSliderPullMore="pullMore"`

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-ep-slider/