首页

1.显示轮播图

2.服务器返回轮播图数据

3安装axios

4从服务器获取数据

5快速访问按钮

首页

1.显示轮播图

src\pages\Home.vue

<div>

</div>

</template>

import swiper from '../components/swiper.vue'

export default {

data () {

return {

imgList: [

{id: 1, src: 'http://…'},

{id: 2, src: 'http://…'}

]

}

components: {

swiper

}

</script>

src\components\swiper.vue

<mt-swipe :auto="4000">

<mt-swipe-item v-for="item in imgList" :key="item.id">

</mt-swipe-item>

</mt-swipe>

</template>

export default {

props: ['imgList']

}

</script>

.mint-swipe {

height: 200px;

color: #fff;

.mint-swipe-items-wrap {

.mint-swipe-item {

text-align: center;

}

img {

width: 100%;

height: 100%;

}

</style>

在v-for中添加“:key”的作用：

为for循环中的每一项设置一个唯一标识，

这里将item中的id作为唯一标识。

2.服务器返回轮播图数据

按照“后台服务器搭建说明.doc”操作，安装部署好后台程序。

后台服务器搭建说明_焦糖码奇朵、的博客-CSDN博客

访问测试：

http://tpadmin.test/api/imglist

3安装axios

npm install axios@0.19 --save

src\axios.js

import axios from 'axios'

import config from './config.js'

export default {

install: function (vue) {

var obj = axios.create({

baseURL: config.baseURL

})

vue.prototype.$http = obj

}

配置文件：

src\config.js

export default {

baseURL: 'http://tpadmin.test/api/'

}

src\main.js

写在import MintUI前面

import axios from './axios.js'

Vue.use(axios)

4从服务器获取数据

src\pages\Home.vue

data () {

return {

imgList: []

}

created () {

this.getImgList()

methods: {

getImgList () {

this.$indicator.open({

text: '加载中'

})

this.$http.get('imglist').then(res => {

this.$indicator.close()

if (res.data.code === 0) {

this.$toast('加载轮播图失败')

} else {

this.imgList = res.data.data

}

})

}

测试程序

5快速访问按钮

把首页按钮图片放在src\assets\images目录下。

src\assets\logo.png这个文件已经用不到了，删除即可。

src\tab\Home.vue

<div>

</li>

</li>

<router-link :to="{ name: 'category' }" class="title">

</router-link>

</li>

</li>

</li>

</li>

</ul>

</div>

</template>

样式：

.mui-grid-view.mui-grid-9 {

background-color: #fff;

border: none;

img {

width: 60px;

height: 60px;

}

.mui-table-view-cell > a.title{

display: inline;

}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {

border: 0;

}

.mui-media-body {

font-size: 14px;

}

</style>

（三）Vue项目——微商城：首页页面，轮播图+九宫格访问按钮相关推荐

微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐(三)- 主页面底部导航.轮播图.歌单及歌曲模块开发前言一. 主页面底部导航二. 轮播图区域三. 歌单区域四. 歌曲区域微信小程序之网易云音乐导航前言创建一个新模 ...
CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录前言一.结构的分析二.使用步骤 1.HTML结构 2.CSS样式总结前言本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面轮播图效果 < > css页面 carousel.css #main{ width: 655px; height: 361px; position: relative; } ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
javascript--爱奇艺网站首页（轮播图）
实现一个爱奇艺网站首页的轮播图: <!DOCTYPE html> <html lang="en"> <head><meta charset ...
《锋迷商城》——首页：轮播图
<锋迷商城>系列项目链接: <一> 项目搭建链接: <二>数据库的创建链接: <三>业务流程设计链接: <四>业务流程实现:用户管理 ...
Luffy之Xadmin以及首页搭建(轮播图,导航)
1. 首页 1.1 轮播图 admin站点配置支持图片上传 pip install Pillow 默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径.我们可以将上传的文件保存 ...
电商商城之实现轮播图
第一步:创建数据库表第二步:pojo层 package com.ljl.pojo;import javax.persistence.*; import java.util.Date;public c ...

（三）Vue项目——微商城：首页页面，轮播图+九宫格访问按钮

首页

1.显示轮播图

2.服务器返回轮播图数据

3安装axios

4从服务器获取数据

5快速访问按钮

（三）Vue项目——微商城：首页页面，轮播图+九宫格访问按钮相关推荐

最新文章

热门文章