uniapp初级入门-02
  px8Y25gMnWbQ 2023年12月23日 12 0


接着之前的内容

项目结构图

uniapp初级入门-02_ci

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

*/

测试

uniapp初级入门-02_h5_02

图标,各位可以去阿里妈妈iconfont找找

阿里巴巴图标库

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月23日 0

暂无评论

px8Y25gMnWbQ