接着之前的内容
项目结构图
home.vue
<template>
<view>
<view class="nav-area">
<!-- 这里状态栏 -->
</view>
<!-- 轮播图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
<swiper-item v-for="item in barnerList" :key="item.id">
<img :src="item.pic" alt="" style="width:100%;">
</swiper-item>
</swiper>
<!-- <button type="default" @tap="login">登录</button> -->
<!-- <button type="default" @tap="doFind">获取分类</button> -->
<view class="box">
</view>
<view class="parent">
<view v-for="item in 6" :key="item">
{{ item}}
</view>
</view>
<swiper
:indicator-dots="true"
:autoplay="true"
:interval="3000"
:duration="1500"
circular
:display-multiple-items="3" >
<swiper-item v-for="item in hotList" :key="item.id">
<image :src="item.pic" mode="" style="width:95%;"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { getBannerAds, doLogin, findCategory, getHotList} from '@/api/home/index.js'
export default {
data() {
return {
barnerList:[],
hotList:[],
};
},
methods: {
// login(){
// doLogin({
// username:'17596496508',
// password: '123456'
// }).then(res=>{
// //console.log(res)
// });
// },
// doFind(){
// findCategory(1).then(res=>{
// //console.log(res)
// })
// }
},
onLoad(options) {
getBannerAds().then(res=>{
this.barnerList = res.data.items;
})
getHotList().then(res=>{
console.log(res);
this.hotList = res.data.items;
})
}
}
</script>
<style lang="scss">
.nav-area{
height: var(--status-bar-height);
width: 100%;
}
.box{
width: 208rpx;
height: 140rpx;
background-color: $uni-bg-color-hover;
}
.parent {
display: flex;
align-items: center;
overflow-x: auto;
view{
height: 200rpx;
width: 300rpx;
background-color: gray;
flex-shrink: 0;
}
}
</style>
api
baseUrl.js
export default "http://leju.bufan.cloud"
request.js
import baseUrl from '@/api/baseUrl.js'
let instance = (config) => {
return new Promise((resolve,rejected)=>{
uni.request({
url: baseUrl + config.url,
timeout: 5000,
data:config.data,
method: config.method,
success(res){
resolve(res.data);
}
})
})
}
export default instance;
home.index.js
import request from '@/api/request.js'
export const getBannerAds = () => {
return request({
url:'/lejuClient/home/bannerAds',
method: 'GET'
})
}
export const doLogin = (data) => {
return request({
url:'/lejuClient/login/doLogin',
method: 'POST',
data: data
})
}
export const findCategory = (id) => {
return request({
url:'/lejuClient/productCategory/findCategory/' + id,
method: 'GET'
})
}
export const getHotList = ()=> {
return request({
url:'/lejuClient/home/hotList',
method: 'GET'
})
}
pages.json
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/home/home",
"style" :
{
"navigationBarTitleText" : "首页",
"enablePullDownRefresh" : false,
//也可以去掉导航栏
"navigationStyle": "custom"
//在h5中,去掉导航栏
// "h5": {
// "titleNView": false
// }
}
},
{
"path" : "pages/kind/kind",
"style" :
{
"navigationBarTitleText" : "分类",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/find/find",
"style" :
{
"navigationBarTitleText" : "发现",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText" : "我的",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path": "pages/index2/index2",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/kind/list/list",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "首页"
},
{
"pagePath": "pages/kind/kind",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "分类"
},
{
"pagePath": "pages/find/find",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "发现"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/images/icon1.png",
"selectedIconPath": "static/images/icon2.png",
"text": "我的"
}
]
}
}
接口文档
/*
接口文档
http://leju.bufan.cloud/swagger-ui.html#/23458251433147158583614129289367102716922359/addCartUsingPOST_1
*/
测试
图标,各位可以去阿里妈妈iconfont找找