🙈作者简介:练习时长两年半的Java up主
🙉个人主页:程序员老茶
🙊 ps:点赞👍是免费的,却可以让写博客的作者开心好久好久😎
📚系列专栏:Java全栈,计算机系列(火速更新中)
💭 格言:种一棵树最好的时间是十年前,其次是现在
🏡动动小手,点个关注不迷路,感谢宝子们一键三连
目录
课程名:前端
内容/作用:知识点/设计/实验/作业/练习
学习:Vue3+Vant开发:首页功能实现
1、头部布局实现
下面修改views/home/index.vue
文件
在下面的代码中,使用了nav-bar
这个导航组件,同时在其插槽中添加了button
按钮。
并且为按钮添加了相应的css
样式。
<template>
<div class="home-container">
<van-nav-bar class="page-nav-bar">
<template #right>
<van-button
type="info"
size="small"
round
icon="search"
class="search-button"
>搜索</van-button
>
</template>
</van-nav-bar>
</div>
</template>
<script>
export default {};
</script>
<style>
.home-container .search-button {
width: 300px;
height: 30px;
background-color: #5babfb;
border: none;
font-size: 18px;
color: #fff;
}
</style>
2、文章频道列表构建
关于文章的频道列表,这里主要使用了Vant
中的Tab
标签页组件。
Tab
标签页组件提供的功能非常的强大,这里我们使用基础用法就可以。
在导航栏组件的下面添加Tab标签组件
<!-- 频道列表 -->
<van-tabs v-model:active="active" animated swipeable>
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
关于active
属性的作用:默认选中的页签的索引值,页签的索引值是从0开始计算的。
<script>
import {
ref } from "vue";
export default {
setup() {
const active = ref(2);
return {
active };
},
};
</script>
通过 animated
属性可以开启切换标签内容时的转场动画的效果。
通过 swipeable
属性可以开启滑动切换标签页。
这里,我们按住鼠标左键,可以体验到对应的滑动切换的效果。
但是,要注意的是,默认情况下只能在内容区域才能够实现滑动切换的效果,如果在空白区域是没有滑动切换的效果的。
当然,这不能满足我们的需求,后面我们在进行相应的处理。
3、样式调整
<van-tabs class="channel-tabs" v-model:active="active" animated swipeable>
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 5">内容 5</van-tab>
<van-tab title="标签 6">内容 6</van-tab>
<van-tab title="标签 7">内容 7</van-tab>
</van-tabs>
这里,我们首先给van-tabs
添加了一个类选择器。并且又添加了几项导航条。
下面添加对应的样式:
.channel-tabs .van-tab {
min-width: 120px;
border-right: 1px solid #edeff3;
font-size: 16px;
color: #777;
}
这里,每个导航项对应的样式为van-tab
,关于这一点,我们可以通过审查元素进行查看。
在上面的样式中,我们设置了文字的颜色,但是当我们选中某个导航项的时候,希望改变颜色。
.channel-tabs .van-tab--active {
color: #333;
}
这里通过审查,发现选中某项的时候,会添加一个van-tab--active
选择器。
下面,我们修改底部条的样式。
默认情况下底部条的颜色为红色,这里我们希望修改成蓝色,同时修改一下它的宽度。
.channel-tabs .van-tabs__line {
background-color: #3296fa;
width: 20px;
height: 6px;
}
这里也是通过审查元素可以查看到,对应的底部条的类选择器为van-tabs__line
.
4、频道列表汉堡按钮处理
当我们单击该按钮的时候,会出现一个编辑频道的页面,关于这块内容我们先不处理。
这里我们先把该按钮的基本样式效果实现一下。
<van-tabs class="channel-tabs" v-model:active="active" animated swipeable>
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 5">内容 5</van-tab>
<van-tab title="标签 6">内容 6</van-tab>
<van-tab title="标签 7">内容 7</van-tab>
<template #nav-right>
<van-icon name="wap-nav" class="hamburger-btn"></van-icon>
</template>
</van-tabs>
在tab
组件中,我们使用了插槽,关于插槽这块内容,可以参考官方文档
https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab#tabs-slots
在这里,我们指定的是nav-left
,表示的是标签栏右侧内容
.
然后在插槽中使用了van-icon
来指定了一个wap-nav
图标。
下面给该图标指定了对应的css
样式。
.channel-tabs .hamburger-btn {
/* 固定定位 */
position: fixed;
/* 最右侧 */
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 66px;
height: 32px;
background-color: #fff;
/* 设置透明度 */
opacity: 0.902;
/* 设置图标的大小 */
font-size: 23px;
}
但是,这里我们遇到了一个问题:当我们展示到列表中的最后一项的时候,无法展示全。即时让wap-nav
图标设置了透明度,效果上也不是很好。
这里我们可以在wap-nav
图标前面在添加一个占位符。这样可以显示出最后一个列表项。
<template #nav-right>
<i class="placeholder"></i>
<van-icon name="wap-nav" class="hamburger-btn"></van-icon>
</template>
对应的css
样式
.channel-tabs .placeholder {
flex-shrink: 0;
width: 66px;
height: 32px;
}
这里我们指定了占位符的宽度与高度,但是测试的时候发现宽度不起作用。
因为整个列表都是使用flex
布局,而且内部的每一项都平分了对应的宽度,所以这里再添加一个占位符,它的宽度就不起作用了。
这里我们给占位符添加了一个flex-shrink
属性,并且取值为0,表示占位符不参与整个flex
宽度的计算。
5、获取列表数据
这里,我们获取频道列表的真实数据。
首先构建一个发送请求的方法。
在src/api/user.js
文件中添加对应的方法
// 获取用户频道列表
export const getUserChannels = () => {
return request({
method: "GET",
url: "/user/channels",
});
};
下面返回到views/home/index.vue
中添加对应的方法
<script>
import {
ref, onMounted, reactive, toRefs } from "vue";
import {
getUserChannels } from "../../api/user";
function loadChannels(state) {
getUserChannels().then((res) => {
state.channels = res.data;
});
}
export default {
setup() {
const state = reactive({
channels: [],
});
const active = ref(0);
onMounted(() => {
loadChannels(state);
});
return {
...toRefs(state),
active,
};
},
};
</script>
在上面的代码中,导入我们定义好的getUserChannels
方法,然后在onMounted
钩子函数中调用loadChnennes
方法,发送异步请求获取数据。将服务端返回的列表数据填充到state
中的channels
数组中。
然后把state
对象进行解构,在通过toRefs
函数将其转换成响应式,返回模板。
模板的处理如下所示:
<!-- 频道列表 -->
<van-tabs class="channel-tabs" v-model:active="active" animated swipeable>
<van-tab
:title="channel.name"
v-for="channel in channels"
:key="channel.id"
>{
{ channel.name }}的内容</van-tab
>
<template #nav-right>
<i class="placeholder"></i>
<van-icon name="wap-nav" class="hamburger-btn"></van-icon>
</template>
</van-tabs>
在上面的代码中,进行了循环遍历,展示列表项。
最后返回浏览器进行测试。
6、创建列表组件
从这一小节开始,我们要对文章列表进行处理。
当我们单击某个频道的的时候,会展示该频道下的对应的文章内容。
基本的思路:
在这里,我们可以创建一个文章列表组件,到我们单击某个频道的时候,把该频道的编号传递到文章列表组件中,该组件根据接收到的频道的编号ÿ