liuyg
2021-07-03 9a7d014d8e664042686368ebd18b5daa78e0b6ea
pages/article/article.vue
@@ -1,10 +1,10 @@
<template>
   <view class="advisory-big ">
      <!-- 自定义顶部导航栏 -->
      <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
      <!-- <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
         <view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList"
            :style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view>
      </view>
      </view> -->
      <view class="article-tab">
         <view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index)" v-for="(item,index) in articleTabArr"
@@ -36,6 +36,7 @@
               <image :src="i.url"></image>
            </view>
         </view>
         <u-loadmore :status="status" />
      </view>
      
      <!-- 底部导航条 -->
@@ -55,6 +56,7 @@
            pathUrl: "http://s16s652780.51mypc.cn/api",
            page: 1,
            pagesize: 10,
            status: 'loadmore',
            // loadStatus:'loading',  //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
            isLoadMore: false, //是否加载中
            isFlash: false, //是否刷新
@@ -70,28 +72,18 @@
      mounted() {
         // this.getArtcilePageList();
      },
      //上拉加载更多
      // onReachBottom() { //上拉触底函数
      //    console.log("上拉了")
      //    if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
      //       // this.isLoadMore=true
      //       this.page += 1
      //       this.getArtcilePageList(2)
      //    }
      // },
      // //下拉刷新
      // onPullDownRefresh() {
      //    // console.log("下拉了!....");
      //    if (!this.isFlash) { //此处判断,上锁,防止重复请求
      //       // this.isFlash=true;
      //       this.page = 1;
      //       this.getArtcilePageList(1);
      //       uni.stopPullDownRefresh();
      //    }
      // },
      onLoad() {
         this.getArtcilePageList(1);
         this.getArtcilePageList();
         uni.stopPullDownRefresh();
      },
      //上拉加载更多
      onReachBottom() {
         //
         if (this.status=='nomore') return;
         this.page = ++this.page;
         setTimeout(() => {
            this.getArtcilePageList();
         }, 2000);
      },
      methods: {
         goArticleTab(index) {
@@ -102,18 +94,6 @@
         },
         //去跳转详情页面
         goDetail(e) {
            //内容传值容易报错,所以直传id,然后调用接口去查询
            // let detail = {
            //    title: e.title,
            //    content: e.content,
            //    id: e.id,
            //    createTime: e.createTime,
            //    sourceName: e.sourceName,
            //    imgUrl: e.url,
            //    videoUrl:e.videoUrl
            // };
            let detail = {
               id: e.id
            };
@@ -127,7 +107,7 @@
         getArtcilePageList(tab) {
            var that = this;
            uni.request({
               url: that.pathUrl + '/article/article/page',
               url: this.$store.state.piAPI + '/article/article/page',
               method: 'GET',
               data: {
                  current: this.page,
@@ -136,28 +116,21 @@
               success: (res) => {
                  if (res.data.code == 200) {
                     if (res.data.data.records) {
                        if (tab == 1) {
                        //如果总数小于pageSize,不做其他操作
                        if (res.data.data.total < this.pagesize) {
                           that.data = res.data.data.records;
                        } else {
                           //如果总数小于pageSize,不做其他操作
                           if (res.data.data.total < this.pagesize) {
                              that.data = res.data.data.records;
                           if (res.data.data.records.length < this.pagesize) {
                              //如果数量小于分页数量,则为最后一页
                              this.status = 'nomore'
                           } else {
                              if (res.data.data.records.length < this.pagesize) {
                                 //如果数量小于分页数量,则为最后一页
                                 // this.isLoadMore=true;
                                 // this.loadStatus='nomore';
                              } else {
                                 // this.isLoadMore=false
                              }
                              res.data.data.records.forEach((item) => {
                                 that.data.push(item);
                              })
                              //否则继续加载更多数据
                              this.status = 'loading';
                           }
                           res.data.data.records.forEach((item) => {
                              that.data.push(item);
                           })
                        }
                     } else {
                        // this.isLoadMore=true;
                        // this.loadStatus='nomore';
                     }
                     uni.stopPullDownRefresh();
                  }
@@ -168,10 +141,19 @@
   }
</script>
<style>
   page{
      width: 100%;
      height: 100%;
      background-color: #f7f7f7;
   }
</style>
<style lang="scss" scoped>
   .advisory-big {
      width: 100%;
      height: 70%;
      height: 100%;
      background-color: #f7f7f7;
      .uni-nav-bar-info {
         display: flex;
@@ -187,43 +169,51 @@
      .article-tab {
         // background-color: #007AFF;
         background-color: #fff;
         width: 100%;
         height: 2rem;
         height: 2.5rem;
         border-bottom: 2px solid #D7D7D7;
         z-index: 999;
         position: fixed;
         .article-tab-title {
            // text-align: center;
            width: 14%;
            float: left;
            margin-left: 1rem;
            margin-top: 0.5rem;
            // border-bottom: 4px solid #000000;
         }
         image {
            margin-top: 0.35rem;
            width: 1.5rem;
            height: 1.5rem;
         }
      }
      
      .article-content{
         margin-top: 1rem;
         margin-top: 3.5rem;
         width: 100%;
         // background-color: #00FF00;
         
         .advisory-model {
            width: 100%;
            width: 94%;
            margin: 0 auto;
            height: 6rem;
            // background-color: #00FF00;
            background-color: #FFF;
            border-radius: 8px;
            margin-top: 0.5rem;
         
         
            .advisory-left {
               width: 61%;
               width: 64%;
               height: 80%;
               float: left;
               position: relative;
               // background-color: #00FFFF;
               position: relative;
               left: 4%;
               left: 3%;
               top: 10%;
         
         
@@ -276,9 +266,9 @@
         
            .advisory-right {
               // background-color: #222222;
               width: 32%;
               width: 33%;
               height: 80%;
               left: 63%;
               left: 65%;
               position: relative;
               top: 10%;
         
@@ -306,7 +296,7 @@
      width: 30px;
      display: block;
      height: 3.5px;
      background-color: #000;
      background-color: #0BB9C8;
   }
   
   
@@ -324,7 +314,7 @@
      display: flex;
      flex-direction: row;
      position: relative;
      top: 0.35rem;
      top: 2.85rem;
      
      .search-ico-wapper{
         background-color: #F1F1F1;