头条.不同频道列表,搜索功能

同步列表,登录状态,未登录状态,用户编辑时

async addchannle(value) {

      this.tabber.push(value);

      if (this.user) {

        try {

          await postuserinfo({

            id: value.id,

            seq: this.tabber.length,

          });

        } catch (err) {

          console.log(err);

        }

      } else {

        setItem("Userinfo", this.tabber);

      }

    },

    async removechannle(channle) {

      if (this.user) {

        try {

          await removeuserinfo(channle.id);

        } catch (err) {

          console.log(err);

        }

      } else {

        setItem("Userinfo", this.tabber);

      }

    },

利用store的state中的user.来判断用户是否登录,

没有登录,就保存到本地中,等录保存在网络中.

,保存之后再取出来,同步,同样也是判断用户是否登录,同样要判断用户是删除还是跳转 

if (this.user) {

        try {

          const { data } = await userChines();

          this.chennls = data.data.channels;

        } catch (err) {

          console.log(err);

        }

      } else {

        const data = getItem("Userinfo");

        if (data) {

          this.chennls = data;

        } else {

          try {

            const { data } = await userChines();

            this.chennls = data.data.channels;

          } catch (err) {

            console.log(err);

          }

        }

      }

搜索功能,点击搜索按钮,跳转页面,搜索页面,有三个子组件,历史记录,搜索页面,关联页面,

利用v-if v-else-if  v-else来进行显示

声明一个变量,isshow:true

关联页面,input有内容,就显示,v-else-if   ="input.trim().length!==0"

l历史记录 v-else

input输入内容时,关联页面要显示,所联动到的内容也要显示.用到监听

由于监听是只要输入内容就会监听,当我们发送请求时,没输入一次就会发送一次请求.太消耗性能.我们要利用防抖,减少发送次数.

防抖利用组件lodash 中的debounce

下载组件,引用组件

debounce第一个参数是函数,第二个函数是时间

watch: {

    searchItem: {

      handler:

        // console.log(val);

        debounce(function (val) {

          this.getseachinfo(val);

        }, 200),

      immediate: true,

    },

  },

获取的数据.放入空变量中,进行渲染,输入内容时,所写入的关键字,要有一个变红的效果,

把input的内容取出来,进行遍历出来,进行变红,再放进去.

   const header = `<span style="color:red">${this.searchItem}</span>`;

      const data = new RegExp(this.searchItem, "gi");

      return text.replace(data, header);

当我们点击关联出来的数据,要渲染到input中,添加一个点击事件,把数据传过去,并渲染到上面,此时要发送请求把准确的数据拿出来,进行渲染到list中,实现数据的懒加载,和更新

 async onLoad() {

      try {

        const { data } = await getinfotion({

          page: this.page,

          per_page: this.per_page,

          q: this.searchItem,

        });

        const { results } = data.data;

        this.list = [...this.list, ...results];

        this.loading = false;

        if (results.length) {

          this.page++;

        } else {

          this.finished = true;

        }

      } catch (err) {

        console.log(err);

         this.loading = false;

      }