template view class=content image class=bg src=staticbgjpeg mode=image!-- 背景部分 -- view wrap-version-update id=459984040935493wrap-version-update!-- 更新板块 -- view !-- 游戏部分 -- view class

<template>
  <view class="content">
    <image class="bg" src="../../static/bg.jpeg" mode=""></image><!-- 背景部分 -->
    <view>
      <wrap-version-update id="459984040935493"></wrap-version-update><!-- 更新板块 -->
    </view>
    <!-- 游戏部分 -->
    <view class="acd">
      <view class="home">
        <view class="qwe">
          <scroll-view class="navscroll" scroll-y>
            <view
              class="row"
              :class="index == navIndex ? 'active' : ''"
              v-for="(item, index) in navArr"
              @click="clickNav(item.cj)"
              :key="item.cj"
            >
              {{ item.cj }}
            </view>
          </scroll-view>
        </view>
        <view class="zxc">
          <scroll-view class="concent" scroll-y>
            <view class="item" v-for="item in listArr" :key="item.index">
              <newsbox :item="item" @click.native="clickDetail(item)"></newsbox>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="nodata" v-if="!listArr.length">
        <view class="text">暂无数据</view>
      </view>
      <view class="loadStyle" v-if="listArr.length">
        <view class="text" v-if="loading == 1">数据加载中...</view>
        <view class="text" v-if="loading == 2">没有更多了~~</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      listArr: [],
      navArr: [],
      navIndex: 0,
      currentPage: 1,
      loading: 0, //0代表初始化不显示子，1代表加载中，2代表没有更多数据
    };
  },
  onLoad() {
    this.getNav();
    this.getData();
  },
  onReachBottom() {
    console.log("触底了");
    this.loading = 1;
    this.currentPage++;
    this.getData();
  },
  methods: {
    //获取新闻列表数据
    getData(cjname = "光年") {
      uni.request({
        url:
          "https://fc-mp-996cc5c4-951d-41ec-8f8d-b3cea2eb5933.next.bspapp.com/yxlist",
        data: {
          cjname,
          page: this.currentPage,
        },
        success: (res) => {
          if (res.data.length == 0) {
            this.loading = 2;
          }
          this.listArr = [...this.listArr, ...res.data.data];
          console.log(res);
        },
      });
    },
    //获取导航列表数据
    getNav() {
      uni.request({
        url:
          "https://fc-mp-996cc5c4-951d-41ec-8f8d-b3cea2eb5933.next.bspapp.com/cjlist",
        success: (res) => {
          console.log(res);
          this.navArr = res.data.data;
        },
      });
    },

    //点击导航切换
    clickNav(cj) {
      let index = this.navArr.findIndex((item) => {
        return item.cj == cj;
      });
      this.navIndex = index;
      this.currentPage = 1;
      this.listArr = [];
      this.loading = 0;
      this.getData(cj);
      console.log(cj);
    },
    //跳转到详情页
    clickDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .acd {
    flex-direction: row;
    height: 100vh;
    .home {
      width: 30vw;
      height: 100vh;
      display: flex;
      .navscroll {
        float: left;
        width: 70px;
        height: 100%;
        background-color: #f6f6f6;
        flex-direction: column;
        .row {
          display: inline-block;
          line-height: 90rpx;
          padding: 0 30rpx;
          font-size: 35rpx;
        }
        .row.active {
          color: #31c27c;
        }
      }
      .concent {
        padding-left: 10px;
        margin-right: 10px;
        height: 100vh;
        width: 75vw;
        background-color: #ffffff;
        .item {
          padding: 20rpx 0;
          border-bottom: 1rpx #e2e2e2 dotted;
        }
        .nodata {
          padding-top: 50rpx;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          image {
            width: 400rpx;
            height: 400rpx;
          }
          .text {
            color: #999;
            font-size: 20rpx;
          }
        }
      }
    }
    .loadStyle {
      .text {
        font-size: 28rpx;
        color: #999;
        text-align: center;
        padding: 20rpx 0;
      }
    }
  }
}
</style>