解决了后退返回后列表内容分别加载。但没有自动加载的问题

╰+哭是因爲堅強的太久メ 2022-12-05 13:51 90阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

代码：

<template>
      <el-container direction="vertical">
        <sys-header/>
        <div class="user-center">
          
          <div class="user-info">
            <div class="info-left">
              <el-avatar :size="140" :src="userInfo.userPic" class="my-avatar"></el-avatar>
              <div class="info-middle">
                <div class="user-name">{
       { userInfo.userName }}</div>
                <div class="user-intro">{
       { userInfo.userIntroduction }}</div>
                <div class="follow-and-chat" v-if="!isMe">
                  <button
                    v-if="userInfo.attend"
                    class="followed-icon-box"
                    type="button"
                    @click="deleteAttention(userInfo.userId)"
                  >
                    <a>已关注</a>
                  </button>
                  <button
                    v-else
                    class="follow-icon-box"
                    type="button"
                    @click="attendUser(userInfo.userId)"
                  >
                    <img src="@/assets/images/add-attention-icon.png" class="follow-icon"/>
                    <a>关注</a>
                  </button>
                  <router-link :to="'/im/' + userInfo.userId">
                    <button class="chat-icon-box" type="button">
                      <img src="@/assets/images/chat.png" class="answer-icon"/>
                      <a>发私聊</a>
                    </button>
                  </router-link>
                </div>
              </div>
            </div>
            <div class="info-right">
              <div v-if="isMe" class="edit-my-info-box">
                <router-link :to="'/settings'">
                  <el-button class="edit-btn">
                    <i class="iconfont"></i>
                    <span>编辑个人资料</span>
                  </el-button>
                </router-link>
              </div>
              <div v-else class="show-follow-and-fans">
                <div class="follow-sum-box">
                  <span>关注</span>
                  <p>{
       { userInfo.numMap.followNum }}</p>
                </div>
                <div class="fans-sum-box">
                  <span>粉丝</span>
                  <p>{
       { userInfo.numMap.fansNum }}</p>
                </div>
              </div>
            </div>
          </div>
          <el-container class="wrap">
            <el-main class="main-box">
              
              <el-tabs v-model="activeName" :before-leave="tabBeforeLeave" @tab-click="tabClick">
                <el-tab-pane label="动态" name="my-dynamic">
                  <div class="el-tab-inner">
                    <div class="inner-title">我的动态</div>
                    <ul class="dynamic-list" v-if="dynamicList.length">
                      <li v-for="(item,index) in dynamicList" :key="index">
                        <router-link :to="'/issuedetail/' + item.question.questionId">
                          <div class="inner-flex inner-default inner-pdb15">
                            <div>
                              <span v-if="item.actionType===2">关注</span>
                              <span v-if="item.actionType===4">收藏</span>
                              <span v-if="item.actionType===7">赞同</span>
                              <span v-if="item.actionType===11">回答</span>
                              <span v-if="item.actionType===12">发布</span>
    
                              <span v-if="item.actionContentType  === 1">了问题</span>
                              <span v-if="item.actionContentType === 2">了回答</span>
                            </div>
                            <span class="my-dynamic-time">{
       { setTimeFormat(item.addTime) }}</span>
                          </div>
                          <div class="inner-strong">{
       { item.question.questionTitle }}</div>
                        </router-link>
                      </li>
                    </ul>
                    <div class="empty" v-else>没有动态信息~</div>
                  </div>
                </el-tab-pane>
    
                <el-tab-pane label="提问" name="my-ask">
                  <div class="el-tab-inner">
                    <div class="inner-title">我的提问</div>
                    <ul class="my-ask-list" v-if="questionList.length">
                      <li v-for="(item,index) in questionList" :key="index">
                        <router-link :to="'/issuedetail/' + item.questionId">
                          <div class="inner-strong inner-pdb15">{
       { item.questionTitle }}</div>
                          <div class="inner-third">
                            <span>
                              {
       { setTimeFormat(item.addTime) }}   {
       { item.answerSum }}个回答   {
       {
                                item.followSum
                              }}个关注
                            </span>
                          </div>
                        </router-link>
                      </li>
                    </ul>
                    <div class="empty" v-else>你没有任何提问哦~</div>
                  </div>
                </el-tab-pane>
    
                <el-tab-pane label="回答" name="my-answer">
                  <div class="el-tab-inner">
                    <div class="inner-title">我的回答</div>
                    <ul class="answer-list" v-if="answerList.length">
                      <li v-for="(item,index) in answerList" :key="index">
                        <router-link :to="'/issuedetail/' + item.questionId">
                          <div class="inner-strong inner-pdb15">{
       { item.questionTitle }}</div>
                        </router-link>
                        
                        <div class="question-content inner-pdb15">
                          {
       { item.questionContent | ellipsis(140) }}
                          <el-button
                            class="read-whole-btn"
                            v-if="item.questionContent && item.questionContent.length > 140"
                          >
                            <span>阅读全文</span>
                            <i class="iconfont"></i>
                          </el-button>
                        </div>
                        <div class="inner-third">编辑于{
       { setTimeFormat(item.updateTime) }}</div>
                        <div class="inner-bottom">
                          <el-button class="bg-btn">
                            <i class="iconfont"></i>
                            <span>赞同</span>
                          </el-button>
                          <el-button>
                            <i class="iconfont"></i>
                            <span>{
       { item.commentSum }}条评论</span>
                          </el-button>
                          <share :type="1" :id="toString(item.questionId)" :title="item.questionTitle"/>
    
                          <el-button>
                            <i class="iconfont"></i>
                            <span>收藏</span>
                          </el-button>
                          <el-button>
                            <i class="iconfont"></i>
                            <span>喜欢</span>
                          </el-button>
                          <el-button
                            class="read-more"
                            @click="item.showAll=!item.showAll"
                            v-show="!item.showAll"
                          >
                            <span>收起</span>
                            <i class="iconfont"></i>
                          </el-button>
                        </div>
                      </li>
                    </ul>
                    <div class="empty" v-else>你没有回答~</div>
                  </div>
                </el-tab-pane>
    
                
                <el-tab-pane label="关注" name="my-follow" v-if="isMe">
                  <div class="el-tab-inner">
                    <div class="inner-title">我关注的</div>
                    <ul class="follow-list" v-if="attentionList.length">
                      <li v-for="(item,index) in attentionList" :key="index">
                        <div class="inner-flex">
                          <router-link :to="{path:'/user',query:{userId: item.attentioneduid}}">
                            <el-avatar
                              :src="item.attentionedAvatar"
                              :size="66"
                              class="other-user-avatar"
                            ></el-avatar>
                            <div class="inner-flex1">
                              <div class="inner-strong inner-pdb10">{
       { item.attentionedNickName }}</div>
                              <div class="inner-third inner-small">
                                
                                
                              </div>
                            </div>
                          </router-link>
                          <div
                            :key="index"
                            @mouseover="item.focus=true"
                            @mouseleave="item.focus=false"
                            @click="item.followed=!item.followed"
                            class="follow-box"
                          >
                            <template v-if="item.followed">
                              <button
                                v-if="item.focus"
                                class="delete-follow"
                                @click="deleteAttention(item.attentioneduid)"
                              >
                                <a>取消关注</a>
                              </button>
                              <button v-else class="already-follow-icon-box">
                                <a v-if="item.mutual">互相关注</a>
                                <a v-else>已关注</a>
                              </button>
                            </template>
                            <template v-else>
                              <button
                                class="begin-follow-icon-box"
                                @click="attendUser(item.attentioneduid)"
                              >
                                <img
                                  src="@/assets/images/add-attention-icon.png"
                                  class="begin-follow-icon"
                                />
                                <a>关注他</a>
                              </button>
                            </template>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="empty" v-else>你还没有关注~</div>
                  </div>
                </el-tab-pane>
              </el-tabs>
              <div class="bottom-line" v-if="showBottomLine">—— 我也是有底线的 ——</div>
            </el-main>
            
            <sys-aside/>
          </el-container>
        </div>
      </el-container>
    </template>
    
    <script>
    import apiRequest from "@/utils/request";
    import sysHeader from "../../components/header";
    import sysAside from "../Aside/aside";
    import Share from "@/components/share";
    import {onlyNeedsYearMonthAndDay} from "../../utils/format";
    import {attendUser, deleteAttention} from "../../api/user";
    
    export default {
      name: "User",
      components: {sysAside, sysHeader, Share},
      data() {
        return {
          activeName: "my-dynamic",
          isMe: false,
          userInfo: {
            userId: "",
            userName: "",
            userPic: "",
            userIntroduction: "",
            numMap: {
              followNum: "",
              fansNum: "",
            },
            attend: "",
          },
          dynamicList: [],
          questionList: [],
          answerList: [],
          attentionList: [],
          dataList: [],
          pageCount: 1,
          currentPage: 1,
          showBottomLine: false,
        };
      },
    
      watch: {
        $route(to, from) {
          // 监听路由的变化，做你想做的一些事情...
          this.getUserInfo(this.$route.query.userId);
          console.log(this.$route.query.name)
        },
        '$route.query.name': {
          handler(v) {
            this.activeName = v || 'my-dynamic'
            switch (v) {
              case "my-dynamic":
                this.getMyDynamic(1);
                break;
              case "my-ask":
                this.getMyQuestion(1);
                break;
              case "my-answer":
                this.getMyAnswer(1);
                break;
              case "my-follow":
                this.getMyAttention(1);
                break;
            }
          },
          immediate: true,
        }
      },
    
      created() {
        this.getUserInfo(this.$route.query.userId);
        this.getMyDynamic(1);
        this.activeName = this.$route.query.name ? this.$route.query.name : 'my-dynamic'
        console.log(this.activeName)
      },
    
      destroyed() {
        window.removeEventListener("scroll", this.loadNextPage);
      },
    
      methods: {
        // 获取用户信息
        getUserInfo(attentioneduid) {
          let _this = this;
          apiRequest("post", "/qas/api/action/myInformation", {
            attentioneduid: attentioneduid, //被查询用户id
            attentionuid: localStorage.getItem("userid"), //操作用户id
          }).then((res) => {
            _this.userInfo = res.data;
            // 如果传入的用户id和缓存里的用户id是一样的就为true显示编辑按钮
            _this.isMe =
              _this.userInfo.userId === localStorage.getItem("userid")
                ? true
                : false;
            sessionStorage.setItem("userinfo", JSON.stringify(res.data));
          });
        },
    
        tabBeforeLeave() {
          window.removeEventListener("scroll", this.loadNextPage);
        },
    
        // 标签切换
        tabClick(tab) {
          this.dynamicList = [];
          this.questionList = [];
          this.answerList = [];
          this.attentionList = [];
          this.showBottomLine = false;
          this.loadDown();
    
          this.$router.replace({
            query: {
              userId: this.$route.query.userId,
              name: tab.paneName || 'my-dynamic'
            }
          });
    
          switch (tab.name) {
            case "my-dynamic":
              this.getMyDynamic(1);
              break;
            case "my-ask":
              this.getMyQuestion(1);
              break;
            case "my-answer":
              this.getMyAnswer(1);
              break;
            case "my-follow":
              this.getMyAttention(1);
              break;
          }
        },
    
        // 获取用户动态
        getMyDynamic(pageNumber = 1) {
          let _this = this;
          apiRequest("post", "qas/api/action/userDynamic", {
            actionUserId: _this.$route.query.userId,
            pageNumber: pageNumber,
            pageSize: 15,
          }).then((res) => {
            res.data.pageRecords.forEach((key) => {
              _this.dynamicList.push(key);
            });
            _this.currentPage = pageNumber;
            _this.pageCount = res.data.pageCount;
          });
        },
    
        // 获取我的提问
        getMyQuestion(pageNumber) {
          let _this = this;
          apiRequest("post", "qas/api/action/getMyQuestion", {
            actionUserId: _this.$route.query.userId,
            pageNumber: pageNumber,
            pageSize: 10,
          }).then((res) => {
            // _this.dataList = res.data.pageRecords;
            res.data.pageRecords.forEach((key) => {
              _this.questionList.push(key);
            });
            _this.currentPage = pageNumber;
            _this.pageCount = res.data.pageCount;
          });
        },
    
        // 获取我的回答
        getMyAnswer(pageNumber) {
          let _this = this;
          apiRequest("post", "qas/api/action/getMyAnswer", {
            actionUserId: _this.$route.query.userId,
            pageNumber: pageNumber,
            pageSize: 10,
          }).then((res) => {
            // _this.answerList = res.data.pageRecords;
            res.data.pageRecords.forEach((key) => {
              key.showAll = false;
              _this.answerList.push(key);
            });
            _this.currentPage = pageNumber;
            _this.pageCount = res.data.pageCount;
          });
        },
    
        // 获取关注列表
        getMyAttention(pageNumber) {
          let _this = this;
          apiRequest("post", "qas/api/action/getAttentionList", {
            attentionuid: _this.$route.query.userId,
            pageNumber: pageNumber,
            pageSize: 10,
          }).then((res) => {
            // _this.dataList = res.data.list;
            res.data.list.forEach((key) => {
              key.focus = false;
              key.followed = true;
              _this.attentionList.push(key);
            });
            _this.currentPage = pageNumber;
            _this.pageCount = res.data.pageCount;
          });
        },
    
        // 关注用户
        async attendUser(attentioneduid) {
          await attendUser(attentioneduid);
          this.getUserInfo(this.userInfo.userId);
        },
        // 取消关注用户
        async deleteAttention(attentioneduid) {
          await deleteAttention(attentioneduid);
          this.getUserInfo(this.userInfo.userId);
        },
        // 格式化时间，只要年月日
        setTimeFormat(time) {
          return onlyNeedsYearMonthAndDay(time);
        },
    
        // 滚动加载下一页
        loadDown() {
          let _this = this;
          _this.loadNextPage = function () {
            let bottomOfWindow =
              document.documentElement.offsetHeight -
              document.documentElement.scrollTop -
              window.innerHeight <=
              1;
            if (bottomOfWindow) {
              if (_this.currentPage < _this.pageCount) {
                switch (_this.activeName) {
                  case "my-dynamic":
                    _this.getMyDynamic(_this.currentPage + 1);
                    break;
                  case "my-ask":
                    _this.getMyQuestion(_this.currentPage + 1);
                    break;
                  case "my-answer":
                    _this.getMyAnswer(_this.currentPage + 1);
                    break;
                  case "my-follow":
                    _this.getMyAttention(_this.currentPage + 1);
                    break;
                }
                // _this.getHotList(_this.currentPage + 1);
              } else {
                if (!_this.showBottomLine) {
                  _this.showBottomLine = true;
                  window.removeEventListener("scroll", _this.loadNextPage);
                }
              }
            }
          };
          window.addEventListener("scroll", _this.loadNextPage);
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .follow-box {
      color: #ffffff;
    
      //已经关注
      .already-follow-icon-box {
        @include follow-btn-color;
        border: none;
        background: #bcbccb;
      }
    
      .already-follow-icon-box:active {
        background: red;
      }
    
      //取消关注
      .delete-follow {
        @include follow-btn-color;
      }
    
      //未关注
      .un-follow {
        @include follow-btn-color;
      }
    
      //开始点击关注
      .begin-follow-icon-box {
        @include follow-btn-color;
    
        img {
          width: 14px;
          height: 14px;
        }
    
        a {
          font-size: 14px;
        }
      }
    }
    
    .user-center {
      @include maxwidth;
      width: 100%;
    
      .user-info {
        @include box;
        @include flex-center-sb;
        padding: 35px 30px;
        margin-bottom: 20px;
    
        height: 140px;
    
        .info-left {
          flex: 1;
          @include flex-start-center;
    
          .my-avatar {
            float: left;
            margin-right: 30px;
          }
    
          .info-middle {
            float: left;
            width: 288px;
    
            .user-name {
              font-size: 24px;
              font-weight: bold;
            }
    
            .user-intro {
              @include text-ellipsis-multi(2);
              font-size: 16px;
              color: #666666;
              padding: 15px 0;
            }
    
            .follow-and-chat {
              color: rgba(188, 188, 203, 1);
              font-size: 14px;
              line-height: 19px;
              margin-top: 20px;
    
              .follow-icon-box {
                @include follow-btn-color;
                display: inline-block;
                width: 90px;
                height: 30px;
                margin-right: 20px;
    
                img {
                  width: 14px;
                  height: 14px;
                }
              }
    
              .followed-icon-box {
                @include follow-btn-color;
                background-color: gray;
                display: inline-block;
                border: none;
                width: 90px;
                height: 30px;
                margin-right: 20px;
    
                img {
                  width: 14px;
                  height: 14px;
                }
              }
    
              .chat-icon-box {
                @include follow-btn-colourless;
                display: inline-block;
                width: 90px;
                height: 30px;
    
                img {
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }
        }
    
        .info-right {
          .edit-my-info-box {
            .edit-btn {
              @include activeBtn;
              padding: 12px 10px;
    
              a {
                color: #fff;
              }
            }
          }
    
          .show-follow-and-fans {
            //background-color: red;
            width: 310px;
            height: 140px;
            margin-right: 45px;
    
            .follow-sum-box {
              float: left;
              height: 60px;
              margin: 40px auto;
    
              span {
                display: block;
                font-size: 14px;
                color: #666666;
                text-align: center;
              }
    
              p {
                display: block;
                padding: 0;
                font-size: 26px;
                font-weight: bold;
                line-height: 35px;
                color: #222222;
              }
            }
    
            .fans-sum-box {
              float: right;
              height: 60px;
              margin: 40px auto;
    
              span {
                display: block;
                font-size: 14px;
                color: #666666;
                text-align: center;
              }
    
              p {
                display: block;
                padding: 0;
                font-size: 26px;
                font-weight: bold;
                line-height: 35px;
                color: #222222;
              }
            }
          }
        }
      }
    
      .main-box {
        @include box;
        padding: 30px;
    
        /deep/ .el-tabs {
          .el-tabs__header {
            .el-tabs__nav-wrap::after {
              height: 1px;
              background: #f2f4f7;
            }
    
            .el-tabs__active-bar {
              display: none;
            }
    
            .el-tabs__item {
              height: auto;
              padding: 0 0 22px;
              margin-right: 50px;
              color: $base-color;
              line-height: initial;
              font-size: $default-font;
    
              &.is-active {
                font-weight: bold;
                color: $theme-color;
                font-size: $max-font;
              }
            }
          }
        }
      }
    }
    
    .el-tab-inner {
      .inner-title {
        padding: 10px 0;
        font-size: $max-font;
        font-weight: bold;
      }
    
      ul {
        li {
          padding: 20px 0;
          border-bottom: 1px solid #f2f4f7;
    
          .inner-flex {
            @include flex-center-sb;
          }
    
          .other-user-avatar {
            float: left;
          }
    
          .inner-flex1 {
            float: left;
            flex: 1;
            padding-left: 15px;
          }
    
          .inner-strong {
            font-weight: bold;
          }
    
          .inner-pdb15 {
            padding-bottom: 15px;
          }
    
          .question-content-box {
            @include flex-start-center;
    
            .question-image {
              width: 190px;
              height: 105px;
              margin-right: 20px;
              border-radius: 6px;
              overflow: hidden;
            }
    
            .question-content {
              @include text-ellipsis-multi(4);
              position: relative;
              flex: 1;
              color: $default-color;
              padding-bottom: 30px;
              line-height: $default-lh;
            }
          }
    
          .read-more {
            color: rgba(64, 123, 255, 1);
            cursor: pointer;
    
            .icon-bottom {
              font-size: 14px;
              height: 7px;
            }
          }
    
          .inner-pdb10 {
            padding-top: 8px;
            padding-bottom: 10px;
          }
    
          .inner-default {
            color: $default-color;
          }
    
          .inner-third {
            color: $third-color;
    
            span {
              font-size: 16px;
            }
          }
    
          .inner-small {
            font-size: $small-font;
          }
    
          .inner-bottom {
            @include flex-start-center;
            padding-top: 20px;
    
            .share-btn {
              margin-right: 40px;
            }
    
            .el-button {
              // padding: 8px 10px;
              padding: 0;
              margin-right: 40px;
              margin-left: 0;
              color: $third-color;
              font-size: $small-font;
              border: 0;
              border-radius: 4px;
    
              &.bg-btn {
                padding: 8px;
                margin-right: 40px;
                background: rgba(255, 191, 0, 0.24);
                color: $theme-color;
              }
    
              &.read-more {
                margin-left: 280px;
              }
            }
          }
        }
      }
    }
    
    .clearfix {
      clear: both;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221123/6a3c87b81d654979ac8aeca61428e69f.png