yitisheng-mini-app/pages/zyb/npee/index.vue

<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  name: "npee-index",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      topFlag: false,
      schoolName: '',
      current: 1,
      pageSize: 20,
      status: 'more',
      contentText: StaticConstant.loadContentText,
      dataList: []
    }
  },
  onPullDownRefresh() {
    this.current = 1
    this.getData();
  },
  onReachBottom() {
    this.loadMore();
  },
  onLoad() {
    this.getData();
  },
  onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  },
  methods: {
    //搜索招生章程
    searchTitleClick() {
      this.current = 1
      this.dataList =[]
      this.getData()
    },
    clearTitleInput() {
      this.schoolName = ''
      this.current = 1
      this.dataList =[]
      this.getData()
    },
    getData() {
      request.get(ApiConstant.GraduateDegree.majorGroupAll, {
        schoolName: this.schoolName,
        pageNum: this.current,
        pageSize: this.pageSize
      }).then(r => {
        console.log(r)
        if (r.success) {
          //追加到列表数据中
          this.dataList = [...this.dataList, ...r.result.records]
          if (r.result.current >= r.result.pages) {
            this.status = 'noMore'
          } else {
            this.status = 'more'
          }
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    loadMore() {
      if (this.status === 'noMore') {
        return;
      }
      console.log('加载中')
      this.current++;
      this.getData()
    },
    /*回到顶部*/
    clickTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
  }
}
</script>

<template>
  <view class="home">
    <view class="header border-top border-bottom">
      <view class="search-view">
        <view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
          <view style="width: 90%">
            <uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入院校名称" v-model="schoolName"
                            @clear="clearTitleInput" cancelButton="none" @confirm="searchTitleClick"/>
          </view>
          <view style="width: 10%;line-height: 100rpx">
            <text @click="searchTitleClick">搜索</text>
          </view>
        </view>
      </view>
      <view class="tab-head border-bottom slateGray">
        <view class="th">院校</view>
        <view class="th">考研类别</view>
        <view class="th">专业</view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="schoolList" @scrolltolower="loadMore">
      <view class="schoolItem border-bottom" v-for="(item,index) in dataList" :key="index">
        <view class="td font-weight-550">
          {{ item.schoolName }}
        </view>
        <view class="td">
          {{ item.degreeNature }}
        </view>
        <view class="td">
          {{ item.majorName }}
        </view>
      </view>
      <view class="top" :style="{'display':(topFlag===true? 'block':'none')}">
        <uni-icons class="topc" type="arrowthinup" size="40" @click="clickTop"></uni-icons>
      </view>
    </scroll-view>

  </view>
</template>

<style scoped lang="scss">
.home {
  background-color: #ffffff;
  height: 100%;
}

.header {

}

.search-view {
  width: 95%;
  margin: 0 auto;
  border-bottom: 3rpx solid #f6f6f6;
}

.tab-head {
  display: flex;
  flex-direction: row;

  .th {
    width: 33.3%;
    text-align: center;
    line-height: 80rpx;
  }
}

.schoolList {
  height: 85%;
}

.schoolList .schoolItem {
  display: flex;
  flex-direction: row;
  padding: 30rpx 0;
  //line-height: 90rpx;
}

.schoolList .schoolItem .td {
  width: 33.3%;
  color: #333333;
  text-align: center;
}
</style>