tk-mini-program/components/contentList/contentList.vue

<template>
  <scroll-view scroll-y="true" class="scroll" refresher-enabled="true" refresher-threshold="40" @refresherrefresh="onRefresherRefresh" lower-threshold="100" @scrolltolower="onScrollToLower" >
    <uni-card  v-for="(item, index) in list">
      <view class="content-list" @click="goDetail(item)">
      <!-- `````````````````````````` -->
      <image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
      <!-- `````````````````````````````````````` -->
      <view class="content-list-title">
        <view class="cardname">{{ item.anchorId }}</view>
        <view class="content-list-info">
          <view  :class="{Gendermale:item.sex === '1',Genderfemale:item.sex === '2'}">
            <image v-if="item.sex === '2'"  class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
            <image v-else class="Genderimg" src="../../static/male.png" mode="scaleToFill" />
            <view class="age">{{ item.sex === '1'? "男" : "女" }}</view>
          </view>
          <view class="RoomID">PK时间:&nbsp;{{formatDate(item.pkTime)}}</view>
          <view class="Charm">金币:</view>
          <view class="charmValue"> {{item.coin+'K'}}</view>
        </view>
      </view>
      <!-- `````````````````````````````````````````````````````` -->
      </view>
    </uni-card>
  </scroll-view>
</template>

<script>
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
export default {
  inject: ['$global'],
  data() {
    return {
      page: 0,//页码
      size: 10, //每页条数
      list: [],    // 列表数据
    };
  },
  mounted() {
    // 页面加载完成后请求数据
    this.pkList()
  },
  methods: {
    onRefresherRefresh() {
      this.page = 0;
      this.list = [];
      this.pkList();
    },
    goDetail(item) {
      uni.navigateTo({
        url: '/pages/pkDetail/pkDetail',
        success: function(res) {
          res.eventChannel.emit('itemDetail', { 
            item: item,
            });
        },
      })
    },
    formatDate: formatDate,
   async pkList(){
      const res = await request({
        url: "pk/pkList",
        method: "GET",
        data: {
          status: 0,
          page: this.page,
          size: this.size,
          },
          userInfo: false,
      });
      console.log(res);
      if (res.code === 200) {
        this.list.push(...res.data)
        console.log(this.list)
      }
    },
    onScrollToLower() {
      this.page++;
      this.pkList();
    },
  },
};
</script>

<style scoped>
.scroll {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content-list {
  display: flex;
  align-items: center;
  width: 712rpx;
  height: 161rpx;
  background: #ffffff;
  border-radius: 15rpx;
  margin-bottom: 12rpx;
  margin-left: 20rpx;
}
.headShot {
  width: 101rpx;
  height: 101rpx;
  border-radius: 50rpx;
  margin-left: 30rpx;
  margin-right: 33rpx;
}
.content-list-info {
  display: flex;
  align-items: center;
}
.cardname {
  font-size: 31rpx;
  color: #161616;
  line-height: 38rpx;
}
.Genderimg {
  width: 15rpx;
  height: 15rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.age {
  color: #ffffff;
  font-size: 14rpx;
}

.Gendermale{
    background: url(../../static/maleimg.png) no-repeat center;
    width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.Genderfemale{
    background: url(../../static/femaleimg.png) no-repeat center;
    width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.RoomID {
  font-size: 23rpx;
  color: #a3a3a3;
  line-height: 38rpx;

}
.Charm {
  font-size: 23rpx;
  color: #a3a3a3;
  line-height: 38rpx;
  margin-right: 12rpx;
  margin-left: 20rpx;
}
.charmValue {
  font-size: 23rpx;
  color: #161616;
  line-height: 38rpx;
  font-weight: 600;
}
</style>