首页模块(推荐、分类、最新、专辑):
1.功能分析
1.1修改导航栏外观
pages.json文件中
//修改全局外观
"globalStyle": {
"navigationBarTextStyle": "white",//导航字体颜色
"navigationBarTitleText": "首页",//导航标题
"navigationBarBackgroundColor": "#000"//导航背景色
},
1.2使用 分段器组件 搭建子页面
1.3封装异步请求
2.搭建子页面(分段器):
2.1 分析
首页共四个部分:推荐、分类、最新、专辑,将四个部分分别注册为模块组件,并在home中引入注册展示
2.2 分段器介绍及使用
分段器是uni-ui中的一个组件,俗称标签页、tab栏.
https://ext.dcloud.net.cn/plugin?id=54
2.2.1 安装uni-ui npm i @dcloudio/uni-ui
2.2.2 home/index.vue中引入注册分页器uniSegmentedControl
<script>
import homeAlbum from "./home-album";
import homeCategory from "./home-category";
import homeNew from "./home-new";
import homeRecommend from "./home-recommend";
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
components: {
homeAlbum,
homeCategory,
homeNew,
homeRecommend,
uniSegmentedControl
},
data() {
return {
items: [
{ title: "推荐" },
{ title: "分类" },
{ title: "最新" },
{ title: "专辑" }
],
current: 1
};
},
methods: {
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex;
}
}
}
};
</script>
在template中展示
<uni-segmented-control
:values="items.map(v=>v.title)"
:current="current"
@clickItem="onClickItem"
style-type="text"
active-color="#d4237a"
>
</uni-segmented-control>
</view>
<view class="home_tab_content">
<view v-if="current === 0">
<home-recommend></home-recommend>
</view>
<view v-if="current === 1">
<home-category></home-category>
</view>
<view v-if="current === 2">
<home-new></home-new>
</view>
<view v-if="current === 3">
<home-album></home-album>
</view>
</view>
3. 封装自己的异步请求:
3.1 为什么封装
- 原生的请求不支持promise
- uni-app请求不能够方便的添加 请求中 效果
- uni-app的请求返回值是个数组,不方便
3.2 封装思路
- 基于原生promise来封装
- 挂载到Vue原型上
- 通过this.request方式来使用
3.3 步骤
3.3.1 src/utils/request.js
export default (params)=>{
// 加载中
uni.showLoading({
title:"加载中"
})
return new Promise((resolve,reject)=>{
wx.request({
...params,
success(res){
resolve(res.data);
},
fail(err){
reject(err);
},
complete(){
uni.hideLoading();
}
})
})
}
3.3.2 在main.js中挂载到原型上
import request from "./utils/request";
Vue.prototype.request=request;
4. 编写 首页-推荐页面:
4.1 调用this.request接收数据,动态渲染
在home/home-recommend.vue中,先在methods将请求封装为一个函数,使用的时候在mounted中调用即可
data() {
return {
// 推荐列表
recommends: [],
// 月份
monthes: {},
// 热门
hots: [],
// 请求的参数
params: