uniapp 懂你找图 首页推荐

<template>
    <scroll-view @scrolltolower="handleToLower" class="recommend_view" scroll-y v-if="recommends.length>0">
<view class="recommend_wrap">
    <view class="recommend_item"
    v-for="item in recommends"
    :key="item.id">
    <image mode="widthFix" :src="item.thumb"></image>
    </view>
</view>

<view class="moneths_wrap">
    <view class="moneths_title">
        <view class="monthes_title_info">
            <view class="monthes_info">
                <text> {{monthes.MM}} /</text>{{monthes.MM}}月
            </view>
            <view class="monthes_text">你负责美丽就好</view>
        </view>
        <view class="monthes_title_more">更多</view>
    </view>
    <view class="monthes_content">
        <view class="monthes_item"
        v-for="item in monthes.items" :key="item.id">
        <image  mode="aspectFill"
					:src="item.thumb+item.rule.replace('$<Height>',360)">
					</image>
        </view>
    </view>
</view>


<view class="hots_wrap">
			<view class="hots_title">
				<text>热门</text>
			</view>
			<view class="hots_content">
				<view class="hots_item" v-for="item in hots" :key="item.id">
					<image mode="aspectFill" :src="item.thumb">
					</image>
				</view>
			</view>
		</view>


    </scroll-view>
</template>





<script>
import moment from "moment";
export default{
    data(){
        return{
           recommends:[],
           monthes:{},
           hots:[],
           params:{
                limit:30,
                order:"hot",
                skip:0

           },
           hasMore:true
        };
    },
    mounted(){
        this.getList();
    },
    methods:{
        getList(){
        this.request({
            url:"http://service.picasso.adesk.com/v3/homepage/vertical",
            data:this.params,
        })
        .then(result=>{
            if(result.res.vertical.length === 0){
                this.hasMore=false;
                return;
            }

            if(this.recommends.length === 0){
                 // console.log(result);
            this.recommends=result.res.homepage[1].items;
            this.monthes=result.res.homepage[2];
            this.monthes.MM=moment(this.monthes.stime).format("MM");
            this.monthes.DD=moment(this.monthes.stime).format("DD");
            }
            
           
            
            this.hots = [...this.hots, ...result.res.vertical];
        })
    },
        handleToLower(){
            if(this.hasMore){
                 this.params.skip+=this.params.limit;
                 this.getList();
            }else{
                uni.showToast({
                    title:"没有数据了",
                    icon:"none"
                })
            }
           
        }
    }
}
</script>



<style lang='scss' scoped>

.recommend_view{
    height:calc( 100vh - 36px);
}

 .recommend_wrap{
     display:flex;
     flex-wrap:wrap;
     .recommend_item{
         width:50%;
         border:5rpx solid #fff;
     }
 }

 .moneths_wrap {
  .moneths_title {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
    .monthes_title_info {
        color: $color;
        font-size: 30rpx;
        font-weight: 600;
        display: flex;
      .monthes_info {
        text {
           font-size: 34rpx;
        }
      }

      .monthes_text {
           font-size: 34rpx;
           color: #666;
      }
    }

    .monthes_title_more {
           font-size: 24rpx;
           color: $color;
    }
  }

  .monthes_content {
         display: flex;
         flex-wrap: wrap;
         .monthes_item{
             width: 33.33%;
             border:5rpx solid #fff
         }
  }
}








.hots_wrap {
  .hots_title {
      padding: 20rpx;
     
    text {
        border-left: 5rpx solid $color;
      font-size: 24rpx;
      font-weight: 600;
    }
  }

  .hots_content {
 display: flex;
 flex-wrap: wrap;
    .hots_item {
        width: 33.33%;
        border: 5rpx solid #fff;
      image {

      }
    }
  }
}

</style>