TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vant轮播图组件使用

zyz
2021-04-06
/
0 评论
/
41 阅读
/
正在检测是否收录...
04/06

一、基本使用

Swipe轮播组件,直接添加使用。

  • script中,组件的导入,以及是获取轮播图数据

    <script>
    // 组件导入
    import {
        Swipe,
        SwipeItem
    } from 'vant';
    
    export default {
        name: 'homeView',
        components: {    // 组件注册
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
        },
        data() {
            return {
                banner: []    // 轮播图数据源
            }
        },
        created() {
            // 注意这里会涉及到 this 指向问题
            var that = this
    
            // 获取轮播图数据
            this.$ajax.get('/json/banner.json')
                .then(function(response) { // 获取数据成功
                    that.banner = response.data
                })
                .catch(function(err) { // 出错
                    console.log(err)
                })
        }
    }
    </script>
  • 获取到轮播图数据(banner.json)

    [
    {
        id: 1,
        img: "http://www.api.qsyj.com/img/2019banner1.jpg"
    },
    {
        id: 2,
        img: "http://www.api.qsyj.com/img/2019banner2.jpg"
    },
    {
        id: 3,
        img: "http://www.api.qsyj.com/img/2019banner3.jpg"
    },
    {
        id: 4,
        img: "http://www.api.qsyj.com/img/2019banner4.jpg"
    }
    ]
  • template模板中渲染

    <template>
    <div class="home-view">
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" indicator-color="white" class='banner-view'>
            <van-swipe-item v-for='(item,index) in banner' :key="index">
                <img :src="item.img" alt="">
            </van-swipe-item>
        </van-swipe>
    </div>
    </template>
赞(0)
评论 (0)