tk-mini-program/pages/Forum/Forum.vue

<template>
  <view class="forum">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">站内信</view>
  </view>
  <view class="content">
    <view class="scrollView">
      <scroll-view
      show-scrollbar="false"
      scroll-y="true"
      class="scroll"
      refresher-enabled="true"
      refresher-threshold="40"
      @refresherrefresh="onRefresherRefresh"
      lower-threshold="100"
      @scrolltolower="onScrollToLower"
      :refresher-triggered="triggered"
    >
        <view class="card" v-for="(item, index) in list" :key="index">
          <view class="cardTitle">{{ item.title }}</view>
          <view class="cardContent">
            {{ item.content }}
          </view>
          <view class="cardTime">
            <view class="cardTimeTitle">{{ item.time }}</view>
          </view>
        </view>

    </scroll-view>
    </view>
  </view>
  <view class="tabBar">
    <tabBar :tabIndex="1"></tabBar>
  </view>
</template>

<script>
import tabBar from "../../components/tabBar/tabBar";
import request from "../../components/request.js";
export default {
  data() {
    return {
      list: [],
      triggered: false,
      page: 0,
      pageSize: 10,
    };
  },
  onShareAppMessage(res) {
    if (res.from === "menu") {
      return {
        title: "分享",
        path: getCurrentPages()[getCurrentPages().length - 1].route,
      };
    }
  },
  onLoad() {
    this.getlist();
  },
  methods: {
    
    //获取列表数据
    getlist() {
      request({
        url: "systemMessage/list",
        data: {
          page: this.page,
          size: this.pageSize,
        },
        method: "POST",
      }).then((res) => {
        this.triggered = false;
        console.log(res);
        if (res.code === 200) {
            this.list.push(...res.data);
        }
      });
    },

    //下拉刷新
    onRefresherRefresh() {
      console.log("下拉刷新");
        this.triggered = true;
        this.list = [];
        this.page = 0;
        this.getlist();
    },

    //上拉加载
    onScrollToLower() {
      this.page ++;
      this.getlist();
    },

  },
  components: {
    tabBar,
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.title {
  position: absolute;
  top: 120rpx;
  left: 335rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
}
/* 建设中 */
.content {
  position: absolute;
  top: 250rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 100rpx;
}
.building {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.buildingTitle {
  font-size: 40rpx;
  color: #999999;
  font-weight: bold;
  text-align: center;
  margin-top: 50rpx;
}
.scrollView{
  width: 100%;
  height: 100%;
}
.scroll{
  width: 100%;
  height: 93%;
}
.card{
  width: 570rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-right: 50rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-bottom: 20rpx;
  padding-top: 40rpx;
}
.cardTitle{
  width: 570rpx;
  height: 60rpx;
  margin-top: -10rpx;
  font-size: 30rpx;
  color: #333333;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;          /* 隐藏溢出 */
  text-overflow: ellipsis;   /* 显示省略号 */
  white-space: nowrap;   
}
.cardContent{
  width: 570rpx;
  font-size: 28rpx;
  color: #666666;
  border-bottom: 1px solid #e5e5e5;
  padding: 30rpx 0;
  line-height: 50rpx;
}
.cardTime{
  width: 100%;
  height: 60rpx;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.cardTimeTitle{
  font-size: 28rpx;
  color: #999999;
  margin-right: 20rpx;
}
</style>