本文共 2301 字，大约阅读时间需要 7 分钟。

vantUi框架Swiper组件的应用

scroll.vue组件

<template>  <div class="scroll">    <van-swipe      class="scroll-box"      :loop="false"      :show-indicators="false"      :width="width"      :height="height"    >      <van-swipe-item        class="scroll-item"        v-for="item in srcollData"        :key="item.id"        ><img :src="item.value" alt=""      /></van-swipe-item>    </van-swipe>  </div></template><script>export default {     props: {       //滚动数据    srcollData: {         type: Array,      default() {           return [          {               id: 1,            value:              "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1597670918&di=8cedf400cc17108635f348372d0ada13&src=http://a2.att.hudong.com/86/10/01300000184180121920108394217.jpg",          },          {               id: 2,            value:              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597681005470&di=8a7306698d5fdd17aae1b491adf41f1f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F57%2F28%2F01300000921826141405283668131.jpg",          },          {               id: 3,            value:              "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1597670918&di=8cedf400cc17108635f348372d0ada13&src=http://a2.att.hudong.com/86/10/01300000184180121920108394217.jpg",          },          {               id: 4,            value:              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597681005470&di=8a7306698d5fdd17aae1b491adf41f1f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F57%2F28%2F01300000921826141405283668131.jpg",          },          {               id: 5,            value:              "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1597670918&di=8cedf400cc17108635f348372d0ada13&src=http://a2.att.hudong.com/86/10/01300000184180121920108394217.jpg",          },        ];      },    },    //默认高度    height: {         type: Number,      default: 50.04,    },    // 默认width度    width: {         type: Number,      default: 100,    },  },  data() {       return {   };  },};</script><style scoped>img {     width: 100%;  height: 100%;}</style>

具体看githup链接：
https://github.com/await-lfq/vuePlugin.git