【VUE】微商城（四）----封装轮播图组件,axios安装使用

微商城源码

微商城后端接口项目以及部署说明包含API接口说明文档

1、在components文件夹下新建SwiperView.vue文件，并添加基本结构如图所示：

2、打开mint-ui文档找到轮播图组件 mint-ui documentation 并且复制轮播图基础用法

<mt-swipe :auto="4000"><mt-swipe-item>1</mt-swipe-item><mt-swipe-item>2</mt-swipe-item><mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

3、将复制的轮播图基础用法代码粘贴到SwiperView.vue中

4、修改轮播图代码

5、添加轮播图样式代码

.mint-swipe{height: 200px;color: #fff;.mint-swipe-items-wrap{.mint-swipe-item{text-align: center;}}img{width: 100%;height: 100%;}
}

6、找到pages文件夹下的 HomeView.vue使用自定义的轮播图组件，并且向组件传入一个图片数组

7、找两张网络图片填入imgList的src中，测试轮播图效果

https://img.alicdn.com/imgextra/i2/6000000004443/O1CN01LU3qnv1igwPbvzfKz_!!6000000004443-0-octopus.jpg
https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg

轮播图可以正常切换，到此封装轮播图组件，并使用该组件就完成了。

8、安装axios

在控制台输入以下命令安装axios:

cnpm install axios@0.19

9、在src目录下新建一个 axios.js文件，并增加配置

import axios from 'axios'export default {install: function (vue) {// 创建一个axiosconst result = axios.create({// 基准地址baseURL: 'http://tpadmin.test/api/'})// 把创建的axios对象添加到vue原型当中，后面可以使用vue.$http获取axios对象vue.prototype.$http = result}
}

10、在main.js导入axios.js 并注册axios

11、打开pages文件夹下的HomeView.vue 使用vue实例获取到axios对象，发起get请求获取轮播图数据

created () {// 1、在调用函数获取轮播图数据this.getImgList()},methods: {// 2、定义获取轮播图数据的函数 getImgListgetImgList () {// 获取axios对象发起get请求this.$http.get('imglist').then(res => {// 将获取到的轮播图数据赋值给 data中的imgListthis.imgList = res.data.data})}},

启动项目观察效果：从服务器获取到三张图片成功展示

12、异常处理

从接口文档可以看出当code为1 的时候表示获取轮播图成功，0的时候表示失败，所以做以下处理

13、增加loading加载效果

到此，轮播图功能就完成了。

【VUE】微商城（四）----封装轮播图组件,axios安装使用相关推荐

组件封装 - 轮播图组件
轮播图组件封装, 我们主要分为三大步来完成: 1. 基本布局 2. 渲染结构 3. 逻辑封装我们这里封装的轮播图组件和 Element UI 所封装的走马灯组件有所不同 Element UI 是直接 ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
学习使用vue实现一个简单的轮播图
目录关于template外壳: 关于图片的自动切换的处理: 为什么要把第一张图片外的 li 克隆一份放到 li 列表的最后: 函数节流处理 : 关于template外壳: 创建一个div,用于内容的 ...
Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
Vue2 轮播图组件原生slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...
js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
小程序轮播图组件跳转到自定义页面
1.轮播图组件wxml代码 2.轮播图组件js 3.在页面引入轮播图组件 4.设置页面js 5.未跳转之前页面 6.点击轮播图跳转

【VUE】微商城（四）----封装轮播图组件,axios安装使用

微商城源码

微商城后端接口项目以及部署说明包含API接口说明文档

1、在components文件夹下新建SwiperView.vue文件，并添加基本结构如图所示：

2、打开mint-ui文档找到轮播图组件 mint-ui documentation 并且复制轮播图基础用法

3、将复制的轮播图基础用法代码粘贴到SwiperView.vue中

4、修改轮播图代码

5、添加轮播图样式代码

6、找到pages文件夹下的 HomeView.vue使用自定义的轮播图组件，并且向组件传入一个图片数组

7、找两张网络图片填入imgList的src中，测试轮播图效果

8、安装axios

9、在src目录下新建一个 axios.js文件，并增加配置

10、在main.js导入axios.js 并注册axios

11、打开pages文件夹下的HomeView.vue 使用vue实例获取到axios对象，发起get请求获取轮播图数据

12、异常处理

13、增加loading加载效果

【VUE】微商城（四）----封装轮播图组件,axios安装使用相关推荐

最新文章

热门文章

【VUE】微商城（四）----封装轮播图组件,axios安装使用

微商城源码

微商城后端接口项目以及部署说明包含API接口说明文档

1、在components文件夹下新建SwiperView.vue文件，并添加基本结构 如图所示：

2、打开mint-ui文档 找到轮播图组件 mint-ui documentation 并且复制轮播图基础用法

3、将复制的轮播图基础用法代码粘贴到SwiperView.vue中

4、修改轮播图代码

5、添加轮播图样式代码

6、找到pages文件夹下的 HomeView.vue使用自定义的轮播图组件，并且向组件传入一个图片数组

7、找两张网络图片填入imgList的src中，测试轮播图效果

8、安装axios

9、在src目录下新建一个 axios.js文件，并增加配置

10、在main.js导入axios.js 并注册axios

11、打开pages文件夹下的HomeView.vue 使用vue实例获取到axios对象，发起get请求获取轮播图数据

12、异常处理

13、增加loading加载效果

【VUE】微商城（四）----封装轮播图组件,axios安装使用相关推荐

最新文章

热门文章

1、在components文件夹下新建SwiperView.vue文件，并添加基本结构如图所示：

2、打开mint-ui文档找到轮播图组件 mint-ui documentation 并且复制轮播图基础用法