vue小程序开发（四）首页推荐

最新推荐文章于 2025-03-04 17:04:34 发布

WWWOWhite

最新推荐文章于 2025-03-04 17:04:34 发布

阅读量2.2k

点赞数 3

分类专栏： uni-app 文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_45915904/article/details/124161989

版权

uni-app 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue小程序中首页推荐模块的实现，包括动态渲染接口数据、使用moment.js格式化日期、月份模块的样式设计，以及利用scroll-view实现分页加载和头部固定。同时涵盖了热门模块的布局和底部触发功能，以及专辑页面的处理和轮播图应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue小程序开发（四）首页推荐

编写首页-推荐模块

功能介绍

接口文档
数据动态渲染
moment.js 的使用
“热门”列表的基于scroll-view的分页加载

在组件中能用生命周期组件没有太多,使用mouted(){}

推荐-月份模块

月份模块标题样式

省略了上方四张图片的相关代码

home-recommend/index.vue

<template>
<view>
    <!-- 月份开始 -->
    <view class="moneths_wrap">
        <view class="moneths_title">
            <view class="moneths_title_info">
                <view class="moneths_info">
                    <text>18 /</text>
                    01 月
   				 </view>
                <view class="moneths_text">你负责美丽就好</view>
   			 </view>
            <view class="moneths_title_more">更多 > </view>
   		 </view>
        <view class="moneths_content"></view>
    </view>
    <!-- 月份结束 -->
</view>
</template>

<style lang="scss" scoped>
    .moneths_wrap {
        .moneths_title {
            display: flex;
            //   space 属性作用就是左边一块 右边一块
            justify-content: space-between;
            padding:20rpx;
            .moneths_title_info {
                color:$color;
                font-size:30rpx;
                font-weight: 600;
                // 使得两行 变成 一行
                display: flex;
                .moneths_info {
                    text{
                        font-size: 36rpx;
                    }
                }

                .moneths_text {
                    font-size: 34rpx;
                    color:#666;
                    margin-left: 30rpx;
                }
            }

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

        .moneths_content {

        }
    }
</style>

效果

选中代码块快捷键ctrl+shift+p 显示插件提示框，选择generate css tress即可

快捷键 ctrl + D 选中view 删除所有的view

src/uni.scss

$color:#d52a7e;

npm install moment

http://momentjs.cn/

月份格式输出

<template>
    <view>
        <!-- 月份开始 -->
        <view class="moneths_wrap">
            <view class="moneths_title">
                <view class="moneths_title_info">
                    <view class="moneths_info">
                        <text>{{monthes.DD}} /</text>
                        {{monthes.MM}} 月
                    </view>
                    <view class="moneths_text">{{monthes.title}}</view>
                </view>
                <view class="moneths_title_more">更多 > </view>
            </view>
            <view class="moneths_content"></view>
        </view>
        <!-- 月份结束 -->
    </view>
</template>

<script>
//导入 moment.js    
import moment from "moment";
export default {
    data() {
        return {
            //推荐列表
            recommends: [],
            //月份  对象
            monthes: {}
        };
    },
    mounted() {
        this.request({
            url: "http://service.picasso.adesk.com/v3/homepage/vertical",
            data: {
                limit: 30,
                order: "hot",
                skip: 0
            },
        }).then((result) => {
            console.log(result);
            //推荐模块
            this.recommends = result.res.homepage[1].items;
            //月份模块
            this.monthes = result.res.homepage[2];
            //将时间戳 改成 18号/月 moment.js
            this.monthes.MM = moment(this.monthes.stime).format("MM");
            this.monthes.DD = moment(this.monthes.stime).format("DD");
            console.log(this.monthes);
        });
    },
};
</script>

大图变缩略图

图片渲染

image标签中的mode

aspectFit 等比例拉伸

aspectFill 填满

优化月份模块

问题

当请求未返回时显示undefined，优化便是解决这个问题

做判断

快捷键替换代码

ctrl + h

推荐-热门模块

基本布局

response数据格式：

代码：

home-recommend/index.vue

<template>
    <view v-if="recommends.length > 0">
        <!-- 热门 开始 -->
        <view class="hots_wrap">
            <view class="hots_title">
                <text>热门</text>
            </view>
            <view class="hots_content">
                <view class="hot_item" v-for="item in hots" :key="item.id">
                    <image mode="widthFix" :src="item.thumb"></image>
                </view>
            </view>
        </view>

        <!-- 热门 结束 -->
    </view>
</template>

<script>
import moment from "moment";
export default {
    data() {
        return {
            // 热门
            hots: [],
        };
    },
    mounted() {
        this.request({
            url: "http://service.picasso.adesk.com/v3/homepage/vertical",
            data: {
                limit: 30,
                order: "hot",
                skip: 0,
            },
        }).then((result) => {
            //获取热门数据的列表
            this.hots = result.res.vertical;
        });
    },
};
</script>

<style>
  .hots_wrap {
    .hots_title {
      padding: 20rpx;
      text {
        border-left:10rpx solid $color;
        padding-left: 20rpx;
        font-size: 34rpx;
        font-weight: 600;
      }
    }

    .hots_content {
      display: flex;
      flex-wrap: wrap;
      .hot_item {
        width: 33.33%;
        border: 3rpx solid #fff;
        image {
          
        }
      }
    }
  }
</style>

使用scroll-view改造容器

分页功能分析

使用 scroll-view 标签充当分页的容器（小程序内置标签
绑定滚动条触底时间 scrolltolower
实现分页逻辑

实现头部固定

目前效果：

目标效果：

需要实现头部固定变不变

思路：

给容器定个高度，应该是整个屏幕的高➖头部的高，底部的bar不用管，因为小程序把底部剔除出来了

过程：

将根标签改成scroll-view，加入scroll-y表示上下滑动

固定上方头部

注意 - 号左右有空格键

100vh 代表整个屏幕的高度，此处忽略底部bar

分页

分页主要参数：

skip ： 跳过多少条

当我们请求第一页的时候，跳过0条
当请求第二页的时候，需要跳过30条
当请求第三页数据时，需要跳过60条

提取出来，方便改动

data() {
    return {
        //推荐列表
        recommends: [],
        //月份  对象
        monthes: {},
        // 热门
        hots: [],
        //请求的参数
        params: {
            limit: 30,
            order: "hot",
            skip: 0,
        },
        //是否还有下一页
        hasMore: true,
    };
}

实现底部触发

底部触发函数 handleToLower

@scrolltolower="handleToLower"

hasMore：表示是否还有数据

getList()：封装了请求

handleToLower() {
    /**
       * 1 修改参数 skip += limit
       * 2 重新发送请求 getList()
       * 3 请求回来成功 hots 数据的叠加
       */
    if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
    } else {
        //弹窗提示用户
        uni.showToast({
            title: "已经没图片啦",
            duration: 2000,
        });
    }
},

getList()

获得接口的数据

经过调试，发现视频中 length的方法并不能判断是否有图片数据

通过数据观察，发现当没有数据的时候，接口中code的返回值为1，有数据的时候，接口的code的返回值为0

拼接热门数据（es6）：this.hots = […this.hots, …result.res.vertical];

//获取接口的数据
getList() {
    this.request({
        url: "http://service.picasso.adesk.com/v3/homepage/vertical",
        data: this.params,
    }).then((result) => {
        console.log(result);

        //判断还有没有下一页数据
        if (result.code === 1) {
            this.hasMore = false;
            return;
        }

        //第一次发请求的时候
        if (this.recommends.length === 0) {
            //推荐模块
            this.recommends = result.res.homepage[1].items;
            //月份模块
            this.monthes = result.res.homepage[2];
            //将时间戳 改成 18号/月 moment.js
            this.monthes.MM = moment(this.monthes.stime).format("MM");
            this.monthes.DD = moment(this.monthes.stime).format("DD");
            console.log(this.monthes);
        }

        //获取热门数据的列表
        //改成数组拼接的方式 es6
        this.hots = [...this.hots, ...result.res.vertical];
    });
}

首页 - 专辑

功能分析

使用 setNavigationBarTitle 修改页面标题
发送请求获取数据
使用 swiper 轮播图组件
使用 scroll-view 组件实现分页
点击跳转到 专辑详情页

setNavigationBarTitle

在组件中动态修改主题

动态修改页面标题

home-album/index.vue

mounted() {
    //修改页面标题
    uni.setNavigationBarTitle({title:"专辑"});
}

专辑接口：

http://service.picasso.adesk.com/v1/wallpaper/album

轮播图实现

<template>
    <view>
        <!-- 
        swiper
        1 自动轮播 autoplay
        2 指示器  indicator-dots
        3 衔接轮播 circular

        4 swiper 
        默认高度 150px
        5 image
        默认的宽度 320px =》 基本样式中 重置了 100%
        默认高度 240px
        6 计算图片的宽度和高度的比例
        7 把图片的比例也写到 swiper标签样式
        8 默认宽高 100%
        -->
        <!-- 轮播图 开始 -->


        <!-- 轮播图结束 -->
        <view class="album_swiper">
            <swiper
                    autoplay
                    indicator-dots
                    circular
                    >
                <swiper-item
                             v-for="item in banner"
                             :key="item.id"
                             >
                    <image :src="item.thumb"></image>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
data(){
    return{
        params:{
            limit:30,
            order:"new",
            skip:0
        },
        //轮播图数组
        banner:[],
        //列表数组
        album:[]
    }
}
,
    mounted() {
        //修改页面标题
        uni.setNavigationBarTitle({title:"专辑"});
        this.getList();
    },

        methods:{
            //获取接口的数据
            getList(){
                this.request({
                    url:"http://service.picasso.adesk.com/v1/wallpaper/album",
                    data:this.params
                })
                    .then(result=>{
                    console.log(result);
                    this.banner = result.res.banner;
                    this.album = result.res.album;
                })
            }
        }
};
</script>

<style lang="scss" scoped>
.album_swiper{
    swiper{
        //750rpx
        height: calc( 750rpx / 2.3);
        image{
            height: 100%;
        }
    }
}
</style>

列表数据渲染

接口文档

P29

https://www.jianshu.com/p/fb1d1ad58a0b

https://www.showdoc.cc/414855720281749?page_id=3678621017219602

接口文档
推荐: http://service.picasso.adesk.com/v3/homepage/vertical
专辑 http://service.picasso.adesk.com/v1/wallpaper/album
分类: http://service.picasso.adesk.com/v1/vertical/category
分类-最新-热门 http://service.picasso.adesk.com/v1/vertical/category/i d / v e r t i c a l 专 辑 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m 专 辑 − 详 情 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m / {id}/vertical 专辑 http://service.picasso.adesk.com/v1/wallpaper/album 专辑-详情 http://service.picasso.adesk.com/v1/wallpaper/album/id/vertical专辑http://service.picasso.adesk.com/v1/wallpaper/album专辑−详情http://service.picasso.adesk.com/v1/wallpaper/album/{id}/wallpaper
图片评论 http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment