vue weex 轮播图

最新推荐文章于 2024-06-21 10:49:00 发布

niersen丶尼尔森

最新推荐文章于 2024-06-21 10:49:00 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue weex 轮播图

本文链接：https://blog.youkuaiyun.com/Neil_1993/article/details/86604156

笔记专栏收录该内容

65 篇文章

订阅专栏

<template>
    <div>
        <!--轮播图-->
        <slider class="slider" interval="3000" auto-play="true" v-bind:style="{ height: slider_height}">
            <div class="frame" v-for="img in imageList" v-bind:style="{ height: slider_height}">
                <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                imageList: [
                    { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                    { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
                    { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
                ],
                slider_height:'700px'
            }
        },
        created(){

        }
    }
</script>

<style scoped>
    .image {
        width: 100%;
        height: 100%;
    }
    .slider {
        width: 100%;
    }
    .frame {
        width: 100%;
        position: relative;
    }
</style>