test/pages/components/slider-infinite.vue

<template>
    <scroller>
        <text test-id="txt1">{{d1}}</text>
        <slider auto-play="true" @change="change" style="width: 750px;height: 400px;background-color: blue" interval="500" infinite="false">
            <div style="flex: 1;background-color: beige;align-items: center;" v-for="item in items">
                <text style="font-size: 60px;">
                    {{item}}
                </text>
            </div>
            <indicator style="height: 20px"></indicator>
        </slider>
        
        <text test-id="txt2" style="margin-top:60">{{d2}}</text>
        <slider :auto-play="is_auto" @change="change2" style="width: 750px;height: 400px;background-color: blue;" interval="500">
            <div style="flex: 1;background-color: beige;align-items: center;" v-for="item in items">
                <text style="font-size: 60px;">
                    {{item}}
                </text>
            </div>
            <indicator style="height: 20px"></indicator>
        </slider>
    </scroller>
</template>

<script>
    var itemCount = 2;
    module.exports = {
        data: function(){
                return {
                    d1:0,
                    d2:0,
                    items: [],
                    is_auto: true
                }
        },
        created: function () {
                for (var index = 0; index < itemCount ; index++) {
                    this.items[index] = 'Page: ' + index;
                }
                let self = this
                setTimeout(function(){
                    self.is_auto = false
                },5000);
        },
        methods: {
            change: function(e){
              this.d1 = parseInt(this.d1) + 1;
            },
            change2: function(e) {
              this.d2 = parseInt(this.d2) + 1;
            }
        }
    }
</script>