vue+vant搭建移动端框架(2)

最新推荐文章于 2025-05-13 12:27:48 发布

原创

最新推荐文章于 2025-05-13 12:27:48 发布

· 1k 阅读

22 ·

版权

文章标签：

#vue.js #javascript #前端

6.Swipe轮播的使用

6.1引入
Home.vue

<script>
import { Swipe, SwipeItem} from "vant";
export default {
  name: 'Home',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
};
</script>

6.2图片懒加载
当 Swipe 中含有图片时，可以配合 Lazyload 组件实现图片懒加载。
Home.vue

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>

import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
};

6.3 设置图片样式
Home.vue

<template>
  <div class="home">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
  </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem} from "vant";
export default {
  name: 'Home',
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
};
</script>

<style scoped>
  img{
    width: 100%;
  }
</style>

最终效果如下图：
在这里插入图片描述

7.配置多环境变量

7.1配置介绍

以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_BASE_API = ‘development’ 通过process.env.VUE_APP_BASE_API访问。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL。

7.2在项目根目录中新建.env， .env.development 和 .env.production，在文件中定义变量
.env.development 本地开发环境配置