首先创建一个项目，引入axios rem等必要的插件
首页template代码如下
<div class="home">
<div class="header">
<div class="title">K G C 新 闻</div>
<div class="nav">
<ul>
<li v-for="(v, i) in navList" :key="i">{{ v }}</li>
</ul>
<span @click="goMange">+</span>
</div>
</div>
<div class="content">
<div class="main" v-for="(item, index) in newsList" :key="index">
<div>
<img :src="item.pic" class="img" />
</div>
<div>
<div class="titleDes-sty">
{{ item.title }}
</div>
<div class="text-sty">
<span> {{ item.time }}</span>
<span> {{ item.src }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
再简单写一下样式
.home {
width: 100%;
* {
margin: 0;
padding: 0;
}
.content{
margin-top: 2.16rem;
}
.header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
.title {
width: 100%;
height: 1.2rem;
line-height: 1.2rem;
background: #d43d3d;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 40px;
}
.nav {
width: 100%;
height: 0.96rem;
background: #f4f5f6;
color: #505050;
display: flex;
overflow: hidden;
}
.nav ul {
display: flex;
flex-wrap: nowrap;
list-style: none;
overflow-y: hidden;
overflow-x: scroll;
width: 90%;
height: 0.96rem;
}
.nav span {
width: 10%;
text-align: center;
line-height: 0.96rem;
border-left: 1px #ccc solid;
font-size: 40px;
}
.nav ul li {
width: 16.7%;
height: 0.96rem;
font-size: 30px;
text-align: center;
line-height: 0.96rem;
flex: none;
}
.main {
width: 100%;
display: flex;
flex: 1;
.img {
width: 200px;
height: 200px;
}
.titleDes-sty {
font-size: 30px;
}
.text-sty {
font-size: 25px;
}
}
}
</style>
js代码如下： import { mapState, mapActions } from "vuex"使用vuex辅助函数 调用store里面的数据
import { mapState, mapActions } from "vuex";
export default {
name: "HomeView",
created() {
this.getNav();
this.getNews();
},
computed: {
...mapState(["navList", "newsList"]),
},
methods: {
...mapActions(["getNav", "getNews"]),
goMange() {
this.$router.push({
name: "channelManage",
});
},
},
};
</script>
store页面
import Vuex from 'vuex'
import axios from "axios"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
newsList: [],
navList: [],
navList2: [],
},
getters: {
},
mutations: {
// 获取导航栏数据
GETNAV(state, val) {
state.navList = val.slice(0, 6)
state.navList2 = val.slice(6, val.length)
},
// 获取news数据
GETNEWS(state, val) {
state.newsList = val
},
// 获取删除频道数据
GETDELLIST(state, val) {
state.navList = val
},
// 获取添加频道数据
GETADDLIST(state, val) {
state.navList = val
}
},
actions: {
// 获取导航栏数据
getNav(store) {
if (this.state.navList.length == 0) {
axios.get("../json/nav.json").then((res) => {
let {
data: {
result
}
} = res
if (res.data.status == 0) {
store.commit('GETNAV', result)
}
console.log(this);
});
}
},
// 获取news数据
getNews({ commit }) {
axios.get("../json/news.json").then((res) => {
let {
data: {
result: {
list
}
}
} = res
if (res.status == 200) {
commit('GETNEWS', list)
}
});
},
// 获取删除频道axios
getdelList(store, index) {
let arr1 = store.state.navList
let arr2 = store.state.navList2
let newARR = []
arr2.push(arr1[index])
arr1.splice(index, 1)
arr1.forEach(r => {
newARR.push(r)
});
console.log(newARR);
store.commit('GETDELLIST', newARR)
},
getaddList(store, index) {
let arr1 = store.state.navList
let arr2 = store.state.navList2
let newARR = []
arr1.push(arr2[index])
arr1.forEach(r => {
newARR.push(r)
})
arr2.splice(index, 1)
console.log(newARR);
store.commit('GETADDLIST', newARR)
}
},
modules: {
}
})
频道管理页面
<div>
<div class="title">
<img src="@/assets/back.png" @click="back" />
<div>频道管理</div>
</div>
<div>
<p>点击删除以下频道</p>
<div>
<ul>
<li v-for="(item, index) in navList" :key="index" @click="del(index)">
{{ item }}
</li>
</ul>
</div>
</div>
<div>
<p>点击增加以下频道</p>
<div>
<ul>
<li v-for="(item, index) in navList2" :key="index" @click="add(index)">
{{ item }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
name: "ChannelManage",
created() {
this.getNav();
console.log(this.navList);
},
computed: {
...mapState(["navList", "navList2"]),
},
methods: {
...mapActions(["getNav",'getdelList','getaddList']),
back() {
this.$router.push({
name: "home",
});
},
del(index) {
console.log(index);
this.getdelList(index)
},
add(index) {
this.getaddList(index)
console.log(index);
},
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
img {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
.title {
width: 100%;
height: 80px;
line-height: 80px;
background: #d43d3d;
display: flex;
justify-items: center;
justify-content: center;
position: relative;
}
.title div {
color: #fff;
justify-content: center;
}
p {
font-size: 40px;
margin: 10px;
}
li {
list-style: none;
border: 1px #ccc solid;
width: 150px;
line-height: 70px;
height: 70px;
text-align: center;
margin: 10px 10px;
font-size: 40px;
}
ul {
display: flex;
flex-wrap: wrap;
}
</style>
最后的效果图：
