Weex 图片跑马灯效果

类似轮播， 但是没有手势滑动，

KoRSfsAL8B.gif

<template>
    <div>
        <div style="overflow: hidden;" :style="size">
            <div ref="move" @click="tap">
                <image ref="top" :style="size" :src="topImage" resize="cover" @load="onload" placeholder="https://img.alicdn.com/tfs/TB1CWnby7yWBuNjy0FpXXassXXa-32-32.gif"></image>
                <image
                    ref="bottom"
                    :style="size"
                    :src="bottomImage"
                    resize="cover"
                    @load="onload"
                    placeholder="https://img.alicdn.com/tfs/TB1CWnby7yWBuNjy0FpXXassXXa-32-32.gif"
                ></image>
            </div>
        </div>
    </div>
</template>

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

export default {
    props: {
        srcs: { type: Array, defalut: [] },
        defaultIndex: { type: Number, defalut: 0 },
        size: { type: Object, default: { width: 680, height: 400, borderRadius: 20 } }
    },
    data() {
        return {
            scrollIndex: 0, //记录滑动后的选中
            interval: 3000,
            topImage: '',
            bottomImage: ''
        };
    },

    watch: {
        srcs(newValue, oldValue) {
            console.log('newValue');
            if (newValue.length == 0) {
                return;
            }
            this.scrollIndex = this.defaultIndex;
            this.topImage = newValue[this.defaultIndex];
            if (newValue.length < 2) {
                return;
            }
            this.bottomImage = newValue[this.defaultIndex + 1];
            let self = this;
            setInterval(() => {
                self.animalBegin(300);
            }, 2000);
        }
    },
    components: {},
    computed: {},
    created() {},
    mounted() {},
    methods: {
        onload: function(e) {
            this.$emit(e);
        },

        animalBegin(time) {
            var testEl = this.$refs.move;
            let self = this;
            let moveWidth = 400;
            animation.transition(
                testEl,
                {
                    styles: {
                        transform: 'translate(0px,' + -moveWidth + 'px)'
                    },
                    duration: time, //ms
                    timingFunction: 'ease-out',
                    delay: 0 //ms
                },
                function() {
                    self.topImage = self.bottomImage;
                    self.scrollIndex++;
                    setTimeout(function() {
                        animation.transition(
                            testEl,
                            {
                                styles: {
                                    transform: 'translate(0px,' + 0 + 'px)'
                                },
                                needLayout: true,
                                duration: 0, //ms
                                delay: 0 //ms
                            },
                            e => {
                                if (self.scrollIndex == self.srcs.length) {
                                    self.scrollIndex = 0;
                                    self.topImage = self.srcs[0];
                                    self.bottomImage = self.srcs[self.scrollIndex + 1];
                                } else if (self.scrollIndex == self.srcs.length - 1) {
                                    self.topImage = self.srcs[self.scrollIndex];
                                    self.bottomImage = self.srcs[0];
                                } else {
                                    self.topImage = self.srcs[self.scrollIndex];
                                    self.bottomImage = self.srcs[self.scrollIndex + 1];
                                }
                            }
                        );
                    }, 100);

                    // modal.toast({ message: 'animation finished.' });
                }
            );
        },
        
        tap(){
            this.$emit('click', {index: this.scrollIndex})
        }
    }
};
</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>