vue weex 轮播图

朴灿烈づ我的快乐病毒、 2021-09-17 22:20 385阅读 0赞

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue简单实现轮播图

一准备数据 (1)定义一个dataList，里面存放我们的图片 `dataList:['../../static/images/300.jpg','../../sta

短命女/ 2023年07月06日 06:22/ 0 赞/ 137 阅读

相关 Vue轮播图（swiper）

Vue轮播图（swiper）注意：swiper版本为5.x.x时，import才能引入成功 1. 在terminal中输入,引入swiper依赖 --

骑猪看日落/ 2023年03月04日 06:46/ 0 赞/ 2 阅读

相关 vue走马灯/轮播图

<div class="banner"> <el-carousel height="460px" :interval="5000" arrow="a

Dear 丶/ 2022年11月18日 05:49/ 0 赞/ 275 阅读

相关 html vue轮播图,webpack+Vue实现轮播图

前言本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了

迈不过友情╰/ 2022年10月19日 01:39/ 0 赞/ 236 阅读

相关 vue各类轮播图大全

npm install vue-awesome-swiper --save [https://www.npmjs.com/package/vue-awesome-sw

ゝ一世哀愁。/ 2022年02月19日 14:15/ 0 赞/ 173 阅读

相关轮播图

本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head>

秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 506 阅读

相关 vue实现简单轮播图

实现思路: 1. 将vue的框架封装在function中，在界面刷新时调用，将要轮播的图片存放在data中，还有下面的列表也分别保存在data中的一个数组中，然后每隔一

比眉伴天荒/ 2021年11月02日 00:40/ 0 赞/ 372 阅读

相关 vue weex 新闻公告向上轮播

<template> <div> <div class="news_box"> <di

梦里梦外;/ 2021年09月17日 22:22/ 0 赞/ 311 阅读

相关 vue weex 轮播图

<template> <div>  <slider class="slider" i

朴灿烈づ我的快乐病毒、/ 2021年09月17日 22:20/ 0 赞/ 386 阅读

相关 Vue-Vant实现轮播图

参考文档：[Vant][] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

我会带着你远行/ 2021年09月09日 02:02/ 0 赞/ 1586 阅读