<template>
<div class="channel-box">
<div class="channel-list">
<ul ref="channelList" :style="{ left: -nowLeft + 'px' }">
<li v-for="(item, index) in list" :key="index" :ref="'li' + index">
<span class="channel" :class="{ 'channel-active': id === item.id }" @click="selectChannel(item)">
{{ item.tag_name }}
</span>
</li>
</ul>
</div>
<div class="icon-lf">
<i v-show="showLf" class="el-icon-arrow-left" @click="handleLeft" />
</div>
<div class="icon-rt">
<i v-show="showRt" class="el-icon-arrow-right" @click="handleRight" />
</div>
</div>
</template>
<script>
import { getNewChannel, getNewList } from '@/api/news'
export default {
data() {
return {
list: [],
id: 0,
fixedWidth: 200,
nowNum: 0,
showLf: false,
showRt: false,
allWidth: 0,
nowLeft: 0,
nowIndex: 0 }
},
mounted() {
this.getChannel().then(res => {
console.log('channel', res)
if (res && res.status === 200 && res.data.status === 0) {
this.list = []
res.data.result.forEach((element,) => {
this.list.push({ 'id': index, 'tag_name': element })
})
this.$nextTick(() => {
this.allWidth = this.$refs.channelList.offsetWidth
if (this.allWidth > this.fixedWidth) {
this.showRt = true
}
this.selectChannel({ id: 0, tag_name: '头条' })
})
}
})
},
methods: {
// 异步获取频道
async getChannel() {
const data = await getNewChannel()
return data
},
// 选择频道,根据频道获取新闻
selectChannel(item) {
this.$store.commit('SET_LOADING', true)
this.$store.commit('SET_CHANNEL', item.tag_name)
this.getNews(item.tag_name).then(res => {
console.log('news', res)
if (res) {
scrollTo(0, 0)
this.$store.commit('SET_NEWS', res.data.result.list)
this.id = item.id
}
this.$store.commit('SET_LOADING', false)
})
},
// 异步获取新闻
async getNews(channel) {
const data = await getNewList(channel)
return data
},
// 频道列表左移
handleLeft() {
if (this.nowLeft > 0) {
this.nowNum--
this.showRt = true
if (this.nowNum > 0) {
let nw = 0
for (let j = this.list.length; j >= 0; j--) {
if (j < this.nowIndex) {
nw += this.$refs['li' + j][0].offsetWidth
if (nw >= this.fixedWidth) {
nw -= this.$refs['li' + j][0].offsetWidth
this.nowLeft -= nw
this.nowIndex = j + 1
break
}
}
}
} else {
this.nowLeft = 0
this.nowIndex = 0
this.showLf = false
}
}
},
// 频道列表右移
handleRight() {
if (this.nowLeft + this.fixedWidth < this.allWidth) {
this.nowNum++
this.showLf = true
let nw = 0
for (let i = 0; i < this.list.length; i++) {
if (i >= this.nowIndex) {
nw += this.$refs['li' + i][0].offsetWidth
if (nw > this.fixedWidth) {
nw -= this.$refs['li' + i][0].offsetWidth
this.nowLeft += nw
this.nowIndex = i
break
}
}
}
if (this.nowLeft + this.fixedWidth >= this.allWidth) {
this.showRt = false
}
}
}
}
}
</script>
<style lang="scss" scoped>
.channel-box {
width: 100%;
padding: 0 20px;
height: 46px;
position: fixed;
align-items: center;
top: 1.2rem;
font-size: 18px;
letter-spacing: 3px;
background-color: rgb(252, 248, 248);
.channel-list {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
margin-top: 0.2rem;
ul {
transition-duration: 0.3s;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
li {
white-space: nowrap;
display: inline-block;
white-space: nowrap;
padding: 0 10px;
}
li:first-child {
padding-left: 0;
}
li:last-child {
padding-right: 0;
}
}
.channel {
cursor: pointer;
display: inline-block;
height: 28px;
line-height: 28px;
transition: border-color 0.2s;
&:hover {
color: #e72521;
}
}
.channel-active {
color: #e72521;
}
}
.icon-lf {
cursor: pointer;
line-height: 30px;
position: absolute;
left: 5px;
top: 6px;
}
.icon-rt {
line-height: 30px;
cursor: pointer;
position: absolute;
right: 5px;
top: 6px;
}
}
</style>
