<template>

  <div class="div">

    <swiper-vertical autoplay="true" interval="3000" duration="800"
                     vertical="true" display-multiple-items="2" class="sunburnSwiper">
    <div class="div1" v-for="(item,index) in rows" :ref="item">
      <text class="text" >{{item}}</text>
    </div>
    </swiper-vertical>
   <!-- <scroller class="sunburnSwiper"  :ref="swiper">
      <div class="div1" v-for="(item,index) in rows">
        <text class="text" >{{item}}</text>
      </div>
    </scroller>-->
  </div>
</template>
<style scoped>
  .div{
    margin-top: 100px;
    height: 200px;
  }
  .sunburnSwiper{
    width: 750px;
    height: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: red;
  }
  .text{
    font-size: 80px;
  }
  .div1{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
  }
</style>
<script>
    import wx from './../../../common/wx.js';
    import swiper_vertical from './../../../common/components/swiper-vertical';
    export default {
        components:{
          "swiper-vertical":swiper_vertical
        },
        data:function () {
            return {
              rows:["row1","row2","row3","row4","row5","row6","row7","row8"]
              //rows:["row1","row2","row3","row4","row5"]
            }
        },
        mixins: [require('./../../../common/publish').publish],
        methods: {
            goto2(){
                const dom = weex.requireModule('dom')

                const el = this.$refs.row2[0];
                dom.scrollToElement(el, {})
            }
        },
        mounted:function () {

        }
    }
</script>