Vue移动端项目--黑马头条-CFANZ编程社区

❤️首页—频道编辑

1、处理页面弹出层

使用vant里面的popup弹出层组件
在views/home/index.vue里面 data中添加一个数据变量： isChannelEditShow: true

在views/home/index.vue里面添加弹出层组件

<!-- 频道编辑 -->
<van-popup
  class="edit-channel-popup"
  v-model="isChannelEditShow"
  position="bottom"
  :style="{ height: '100%' }"
  closeable
  close-icon-position="top-left"
>内容</van-popup>
<!-- /频道编辑 -->

给汉堡按钮绑定点击事件

2、创建频道编辑组件

创建 views/home/components/channel-edit.vue
在首页home/index.vue中导入、注册、使用

3、给频道编辑页面布局

4、渲染我的频道（只需要通过父子通信传递到当前频道编辑组件即可）

在父组件中把 channels 传递给频道编辑组件

 <ChannelEdit :myChannels="UserChannels"></ChannelEdit>

在子组件频道编辑中声明userChannels接收父组件的传递过来的数据，并渲染

5、激活频道高亮

思路：

将首页中的激活的标签索引传递给频道编辑组件
在频道编辑组件中遍历我的频道列表的时候判断遍历项的索引是否等于激活的频道标签索引，如果一样则作用一个高亮的 CSS 类名

将首页组件中的 active 传递到频道编辑组件中
在频道编辑组件中声明 props 接收
判断遍历项，如果 index === active，则给这个频道项设置高亮样式

6、展示推荐频道列表

因为没有直接获取推荐频道的数据接口，所以我们利用获取所有频道列表的数据接口，

所有频道列表 - 我的频道 = 剩余推荐的频道。

1.获取所有频道

创建src/api/channel.js，封装获取所有列表的数据接口
在编辑频道组件中请求获取所有频道数据，并测试是否拿到数据

2.处理展示推荐频道

封装计算属性筛选数据

computed:{
    recommentChannels(){
        let arr = []  // 推荐数据
        // 遍历所有频道
        this.allChannels.forEach(channel=>{
            // 遍历的元素是不是在我的频道里面的内容，如果不是，就说明是推荐频道
            let ret = this.myChannels.find(myChannel=>{
                return myChannel.id === channel.id
            })
            if(!ret){
                arr.push(channel)
            }
        })
        return arr
    }
}

模板绑定

<!-- 频道推荐 -->
<van-cell :border="false">
    <div slot="title" class="title-text">频道推荐</div>
</van-cell>
<van-grid class="recommend-grid" :gutter="10">
    <van-grid-item
                   class="grid-item"
                   v-for="(channel, index) in recommendChannels"
                   :key="index"
                   icon="plus"
                   :text="channel.name"
                   />
</van-grid>
<!-- /频道推荐 -->

7、添加频道

思路：

给推荐频道列表中每一项注册点击事件
获取点击的频道项
将频道项添加到我的频道中
~~将当前点击的频道项从推荐频道中移除~~
- 不需要删除，因为我们获取数据使用的是计算属性，当我频道发生改变，计算属性重新求值了

给推荐频道中的频道注册点击事件
在添加频道事件处理函数中

ps:因为推荐频道是通过一个计算属性获取的，计算属性中使用了 channels（我的频道）数据，所以只要我的频道中的数据发生变化，那么计算属性就会重新运算获取最新的数据。

8、编辑频道

思路：

给我的频道中的频道项注册点击事件
在事件处理函数中
- 如果是编辑状态，则执行删除频道操作
- 如果是非编辑状态，则执行切换频道操作

在 data 中添加数据用来控制编辑状态的显示
在我的频道项中添加删除图标
处理点击编辑按钮

切换频道(跳转Tab）

给我的频道项注册点击事件
处理函数
在父组件home/index.vue中监听处理自定义事件

删除频道（在编辑状态下删除频道）

 onMyChannelClick(channel, index) {
      if (this.isEdit) {
        if (this.fiexdChannels.includes(channel.id)) {
          return;
        }
        this.myChannels.splice(index, 1);
        if (index <= this.active) {
          this.$emit("update-active", this.active - 1, true);
        }
      } else {
        this.$emit("update-active", index, false);
      }
    },

父组件home/index.vue里面的监听方法进行调整

  onUpdateActive(index, isChannelEditShow = true) {
      this.active = index;
      this.isChannelEditShow = isChannelEditShow;
    },