wxc-ep-slider

Binding Slider

!> These rich interaction components are based on BindingX feature. Make sure your app install it.

Rule

• Used to enrich slide, including merchandise window, picture list, etc.
• If the child element has click event, because of the reason in android, You now need to bind the expression event in child element, Weex Ui has provided wxc-pan-cell to solve this issue, you can see more in here.

Demo

    <https://img.alicdn.com/tfs/TB1dzqbcuuSBuNjSsplXXbe8pXa-200-200.png" width=“160”/>

Code Example

<template>
  <div class="wrapper">
    <wxc-ep-slider :slider-id="sliderId"
                   :card-length='cardLength'
                   :card-s="cardSize"
                   :select-index="2"
                   @wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected">

      <!--demo-->
      <div v-for="(v,index) in [1,2,3,4,5]"
           :key="index"
           :slot="`card${index}_${sliderId}`"
           :class="['slider',`slider${index}`]">
        <text>this is the {{index + 1}} slider</text>
      </div>
    </wxc-ep-slider>
  </div>
</template>

<style scoped>
  .wrapper {
    padding-top: 100px;
  }

  .slider {
    width: 400px;
    height: 300px;
    background-color: #C3413D;
    align-items: center;
    justify-content: center;
  }

  .slider1 {
    background-color: #635147;
  }

  .slider2 {
    background-color: #FFC302;
  }

  .slider3 {
    background-color: #FF9090;
  }

  .slider4 {
    background-color: #546E7A;
  }
</style>

<script>
  import { WxcEpSlider } from 'weex-ui';

  export default {
    components: { WxcEpSlider },
    data: () => ({
      sliderId: 1,
      cardLength: 5,
      cardSize: {
        width: 400,
        height: 300,
        spacing: 0,
        scale: 0.8
      }
    }),
    methods: {
      wxcEpSliderCurrentIndexSelected (e) {
        const index = e.currentIndex;
        console.log(index);
      }
    }
  }
</script>

More details can be found in here

API

More

Manually setting page

// <wxc-ep-slider ref="wxc-ep-slider"></wxc-ep-slider
this.$refs['wxc-ep-slider'].manualSetPage(1); 

Rebind

// <wxc-ep-slider ref="wxc-ep-slider"></wxc-ep-slider
this.$refs['wxc-ep-slider'].rebind(); 

Event

// @wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected"