1.功能分析
修改导航栏外观
"globalStyle": {
//全局设置文件
"navigationBarTextStyle": "black",
//导航栏标题颜色,仅支持黑白色
"navigationBarTitleText": "uni-app",
//标签名字
"navigationBarBackgroundColor": "#aaaaff",
//导航栏背景颜色
}
使用 分段器组件搭建子页面
封装自己异步请求
2.搭建子页面
首页面分为四个部分,分别是推荐,分类,最新,专辑
新建自定义组件来代替上述的四个页面
home-recommend
home-category
home-new
home-album
//因为首页分为四个部分,所以用组件来说更丝滑一点,所以此处创建四个新的组件
在index.vue文件中填写
做四个文件
<template>
<view>专辑</view>
</template>
<script>
export default {
name:"home-album",
data() {
return {
};
}
}
</script>
<style>
</style>
在/index/index.vue文件中
<view>
<homeAlbum></homeAlbum>
<homeCategory></homeCategory>
<homeNew></homeNew>
<homereCommend></homereCommend>
</view>
//引入四个组件页面
import homeAlbum from "../../components/home-album";
import homeCategory from "../../components/home-category";
import homeNew from "../../components/home-new";
import homereCommend from "../../components/home-recommend";
export default {
components:{
homeAlbum,
homeCategory,
homeNew,
homereCommend,
},
2.分段器
分段器指的是uni-ui的一个组件,其实就是我们俗称的标签页,tab栏
简而言之,需要先下载组件,然后在几个文件里键入命令引用组件,最后写入代码即可
此处我把前两部所需要的网址发过来
键入命令配置引用组件: https://www.uviewui.com/components/downloadSetting.html
组件下载地址:https://ext.dcloud.net.cn/plugin?id=1593
<template>
<view class="bgcolor">
<view>
<view class="subsection"></view> <!-- 模块作用是将下面的四个滑动选择器往下挪挪,防止置顶,影响美观 -->
<!-- 此处表示出现分段选择器,
:animation="true" 是否开启动画效果
value="list.map(v=>v.title)" 直接返回list函数内的字符串
style-type="text"标题外观改成普通文本
active-color="#ff0000" 改变标题文本颜色
list表示数据来源是后面的list对象内,
current=”curNow表示此处数据等于下方声明的数值,表示选择的唯一性,然后用后面
的@change事件引用声明了sectionchange,然后下方声明函数sectionChange中不获取
值,而是通过页面手指选择来确定current的值来确定滑动选择器应处的位置 -->
<u-subsection :mode="subsection" :font-size="10" :animation="true" :list="list" :value="list.map(v=>v.name)" style-type="text" active-color="#ff0000" :current="curNow" @change="sectionChange"></u-subsection>
<!-- 组建新的view模块,用来规划展示上面四个组件的内部内容-->
<view class="content">
<view v-if="curNow ===0 ">
1<homeAlbum></homeAlbum>
</view>
<view v-if="curNow ===1 ">
2<homeCategory></homeCategory>
</view>
<view v-if="curNow ===2 ">
3<homeAlbum></homeAlbum>
</view>
<view v-if="curNow ===3 ">
4<homereCommend></homereCommend>
</view>
</view>
</view>
</view>
</template>
<script>
//引入四个组件页面
import homeAlbum from "../../components/home-album";
import homeCategory from "../../components/home-category";
import homeNew from "../../components/home-new";
import homereCommend from "../../components/home-recommend";
// import {unisegmentedcontrol} from "../../components/home-recommend";
export default {
//注册组件
components:{
homeAlbum,
homeCategory,
homeNew,
homereCommend,
// unisegmentedcontrol,
},
data() {
return {
//此处较为重视,因为list函数是目前极少私用【】中括号的函数
list: [{name:'推荐'},{name:'最新'},{name:'分类'},{name:'专辑'}],
curNow:0
};
},
onLoad() {
uni.request({url:"https://www.dcloud.io/"})
.then(res=>{console.log(res);})
},
methods: {
//此处注册的是上方滑动选择器的随机获取数值
sectionChange(e){
this.curNow=e;
}
//应用,注册,申明e
}
}
</script>
<style scoped lang="scss">
.bgcolor{
background-color: #ffeeef;
width: 750rpx;
height: 1290rpx;
}
.wrap{
padding: 30rpx;
}
.subsection{
height: 10px;
}
</style>