• 直接上代碼

  
  
  KoRSfsAL8B.gif

<template>
    <div>
        <div :style="size">
            <slider style="background-color: red;" class="slider" auto-play="true" :interval="interval" @change="onchange" :index="defaultIndex" :style="size">
                <div v-for="(src, i) in srcs" :key="i">
                    <image :style="size" resize="cover" :src="src" @load="onload" placeholder="https://img.alicdn.com/tfs/TB1CWnby7yWBuNjy0FpXXassXXa-32-32.gif"></image>
                </div>
            </slider>
            <div class="indicator" :style="{ width: itemWidth * srcs.length, left: (size.width - itemWidth * srcs.length) / 2 , bottom: moveMarBootm}">
                <div ref="move" class="move" :style="{ width: itemWidth, marginLeft: itemWidth * defaultIndex, backgroundColor: moveColor }"></div>
            </div>
        </div>
    </div>
</template>

<script>
const animation = weex.requireModule('animation')

export default {
    props: {
        srcs: { type: Array, defalut: [] },
        defaultIndex: { type: Number, defalut: 0 },
        itemWidth: { type: Number, default: 35 } ,//移動塊的單個寬度
        moveColor: {type: String, default: '#666666'},
        moveMarBootm: {type: Number, default: 20},
        size: {type: Object, default: {width: 680, height: 400, borderRadius: 20}}
    },
    data() {
        return {
            scrollIndex: 0, //記錄滑動后的選中
            loading: true,
            interval: 3000,
            moveInterval: 300 //移動塊， 移動動畫時間， 比slider動畫時間小
        };
    },
    components: {},
    computed: {},
    created() {},
    methods: {
        onload: function(e) {
            this.$emit(e);
        },

        onchange(e) {
            //當前改變的index
            let index = e.index;
            var time = this.moveInterval;
            if (index == 0) {
                if (this.scrollIndex == this.srcs.length - 1) {
                    time = 0;
                }
            }
            if (index == this.srcs.length - 1) {
                if (this.scrollIndex == 0) {
                    time = 0;
                }
            }
            this.animalBegin(this.itemWidth * index, time, index);
        },

        animalBegin(moveWidth, time, index) {
            var testEl = this.$refs.move;
            let self = this;
            animation.transition(
                testEl,
                {
                    styles: {
                        transform: `translateX(${moveWidth}px, 0px)`
                    },
                    duration: time, //ms
                    timingFunction: 'ease-out',
                    delay: 0 //ms
                },
                function() {
                    self.scrollIndex = index;
                    // modal.toast({ message: 'animation finished.' });
                }
            );
        }
    }
};
</script>

<style scoped>
.size {
    width: 750px;
    height: 500px;
}
.slider {
    position: relative;
}

.indicator {
    position: absolute;
    height: 7px;
    background-color: rgba(255, 255, 255, 0.6);
}
.move {
    height: 7;
}
</style>