html 使用vant轮播组件没效果

发布于 2022-09-12 00:13:22 字数 2000 浏览 17 评论 0

如图所示
image.png

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>找房</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <link rel="stylesheet" type="text/css" href="../css/aui.css" /> -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
        <style>
            
    </style>
    </head>
    <body>
        <div id='app'>
            
            <div>
                <van-swipe :autoplay="3000">
                  <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img src="image" />
                  </van-swipe-item>
                </van-swipe>

        </div>
    </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            
             images: [
                    'https://img.yzcdn.cn/vant/apple-1.jpg',
                    'https://img.yzcdn.cn/vant/apple-2.jpg',
                    'https://img.yzcdn.cn/vant/apple-3.jpg',
                    'https://img.yzcdn.cn/vant/apple-4.jpg',
                  ]
        },
        mounted() {
            
        },
        methods: {
            
    });
</script>

各位大佬,这是怎么回事,少了什么配置吗

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

唱一曲作罢 2022-09-19 00:13:22

有两处错误
1.1576722504977.jpg
2.1576722547994.jpg
效果1576722614227.jpg


<style>
 img{
     width: 100%;

     height: 300px;
 }
</style>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文