【uni-app】懂你找图--首页专辑模块

接口文档
懂你找图--ShowDoc

4.首页-专辑模块

<template>
  <scroll-view
    class="album_scroll_view"
    scroll-y
    @scrolltolower="handleToLower"
  >
    <!-- swiper标签  
        1.自动轮播  autopsy
        2.指示器    indicator
        3.衔接轮播  circular

        swiper默认的高度是150px,image默认的宽度是320px(基本样式中重置了100%)，默认高度是240px
        因为swiper的高度与图片的高度不相等，所以先计算图片宽和高的比例，再把图片的比例写到swiper标签样式中
        swiper-item宽和高都是默认100%
     -->
    <!-- 轮播图开始 -->
    <view class="album_swiper">
      <swiper autopsy indicator circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <image :src="item.thumb"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图结束 -->

    <!-- 列表开始 -->
    <view class="album_list">
      <navigator class="album_item" 
       v-for="item in album" 
       :key="item.id" 
       url="/pages/album/index?id=123">
        <view class="album_img">
          <!-- aspectFill表示将内容等比例拉伸，拉伸至整张图片大小 -->
          <image :src="item.cover" mode="aspectFill"></image>
        </view>
        <view class="album_info">
          <view class="album_name">{
  { item.name }}</view>
          <view class="album_desc">{
  { item.desc }}</view>
          <view class="album_btn">
            <view class="album_attention">+ 关注</view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 列表结束 -->
  </scroll-view>
</template>

<script>
export default {
  // 定义数据
  data() {
    return {
      params: {
        //要获取几条
        limit: 30,
        //关键字
        order: "new",
        //要跳过几条
        skip: 0,
      },
      // 轮播图数组
      banner: [],
      // 列表数组
      album: [],
      // 是否还有下一页
      hasMore: true,
    };
  },
  mounted() {
    // 修改页面的标题
    uni.setNavigationBarTitle({ title: "专辑" });
    this.getList();
  },
  methods: {
    // 获取接口数据
    getList() {
      this.request({
        url: "http://157.122.54.189:6006/image/v1/wallpaper/album",
        data: this.params,
      }).then((result) => {
        if(this.banner.length===0){
          this.banner = result.res.banner;
        }
        
         if (result.res.album.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有数据了",
            icon: "none",
          });
          return;
        }
        this.album = [...this.album, ...result.res.album];
        //  console.log(result);
      });
    },
    // 上拉加载事件-执行分页
    handleToLower() {
      /*  1 修改参数 skip+=limit
          2 重新发送请求 getList()
          3 请求回来成功 album 数据的叠加
      */
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        // 弹窗提示用户
        uni.showToast({
          title: "没有数据了",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.album_scroll_view {
  height: calc(100vh - 36px);
}
.album_swiper {
  swiper {
    //宽是750rpx
    height: calc(750rpx / 2.3);
    iagme {
      height: 100%;
    }
  }
}
.album_list {
  padding: 10rpx;
  .album_item {
    padding: 10rpx 0;
    display: flex;
    border-bottom: 1rpx solid #ccc;
    .album_img {
      flex: 1;
      padding: 10rpx;
      img {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .album_info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;
      .album_name {
        font-size: 30rpx;
        color: #000;
        padding: 10rpx 0;
      }

      .album_desc {
        padding: 10rpx 0;
        font-size: 24rpx;

        //文本溢出 省略
        text-overflow: ellipsis;
        //溢出 隐藏
        overflow: hidden;
        //处理空白 不换行
        white