2021-06-06 uni-app-shop

最新推荐文章于 2024-08-22 08:09:54 发布

lj_w

最新推荐文章于 2024-08-22 08:09:54 发布

阅读量138

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/javaseayy/article/details/117620266

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了uni-app中如何配置index页面的navigationBar、tabBar，包括颜色、文字等细节，并展示了如何通过异步请求获取数据并生成首页轮播图的方法。涉及到的技术点包括uni.request接口的使用和生命周期函数onLoad。

摘要由CSDN通过智能技术生成

提示：uni-app demo-shop

文章目录

一、index

一、index

1.1 navigateBar

    "navigationBarTextStyle": "white",
	"navigationBarTitleText": "hm-shop",
	"navigationBarBackgroundColor": "#b50e03",
	"backgroundColor": "#F8F8F8"

1.2 tabBar

1)首页
2）购物车
"tabBar":{
		"selectedColor":"#b50e03", //被选中字体颜色
		"color":"#C0C0C0",  //未被选中字体颜色
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabBar/index1.png",
				"selectedIconPath":"static/tabBar/index2.png"
			},
			....

在这里插入图片描述

1.3 轮播图

提示：请求接口返回数据生成轮播
1）首页中 methods 增加方法getSwipers(){}
2) 声明周期函数 onLoad this.getSwipers();

onLoad() {
	this.getSwipers()
},
methods: {
	getSwipers () {
		console.log("get swipers")
	}
}

异步请求：
在这里插入图片描述

同步方法和异步方法

  async getSwipers () {
	console.log("get swipers")
	//也可以写成同步方法
	const res = await uni.request({
		url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
	})
	console.log(res)
	/* uni.request({
		url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
		success: request => {
			console.log(request)
			if(request.data.meta.status !== 200){
				return uni.showToast({
					title:'获取数据失败'
				})
			}
			this.swipers = request.message
		}
	}) */