當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時(shí)間：2024/3/13 vue 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue小程序开发（四）首页推荐小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

vue小程序開發(fā)（四）首頁推薦

- 編寫首頁-推薦模塊
- 推薦-最頂部模塊
- 推薦-月份模塊
- - - 月份模塊標(biāo)題樣式
- 推薦-熱門模塊
- - 基本布局
  - 使用scroll-view改造容器
  - - 分頁功能分析
  - 實(shí)現(xiàn)頭部固定
  - 分頁
  - 實(shí)現(xiàn)底部觸發(fā)
- 首頁 - 專輯
- - 功能分析
  - 輪播圖實(shí)現(xiàn)
  - 列表數(shù)據(jù)渲染
- 接口文檔
- 出錯(cuò)
- - net::ERR_PROXY_CONNECTION_FAILED

編寫首頁-推薦模塊

功能介紹

接口文檔
數(shù)據(jù)動(dòng)態(tài)渲染
moment.js 的使用
“熱門”列表的基于scroll-view的分頁加載

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

推薦-熱門模塊

基本布局

response數(shù)據(jù)格式：

代碼：

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) => {//獲取熱門數(shù)據(jù)的列表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 標(biāo)簽充當(dāng)分頁的容器（小程序內(nèi)置標(biāo)簽
綁定滾動(dòng)條觸底時(shí)間 scrolltolower
實(shí)現(xiàn)分頁邏輯

實(shí)現(xiàn)頭部固定

目前效果：

目標(biāo)效果：

需要實(shí)現(xiàn)頭部固定變不變

思路：

給容器定個(gè)高度，應(yīng)該是整個(gè)屏幕的高?頭部的高，底部的bar不用管，因?yàn)樾〕绦虬训撞刻蕹鰜砹?/p>

過程：

將根標(biāo)簽改成scroll-view，加入scroll-y表示上下滑動(dòng)

固定上方頭部

注意 - 號(hào)左右有空格鍵

100vh 代表整個(gè)屏幕的高度，此處忽略底部bar

分頁

分頁主要參數(shù)：

skip ： 跳過多少條

當(dāng)我們請求第一頁的時(shí)候，跳過0條
當(dāng)請求第二頁的時(shí)候，需要跳過30條
當(dāng)請求第三頁數(shù)據(jù)時(shí)，需要跳過60條

提取出來，方便改動(dòng)

data() {return {//推薦列表recommends: [],//月份對象monthes: {},// 熱門hots: [],//請求的參數(shù)params: {limit: 30,order: "hot",skip: 0,},//是否還有下一頁hasMore: true,}; }

實(shí)現(xiàn)底部觸發(fā)

底部觸發(fā)函數(shù) handleToLower

@scrolltolower="handleToLower"

hasMore：表示是否還有數(shù)據(jù)

getList()：封裝了請求

handleToLower() {/*** 1 修改參數(shù) skip += limit* 2 重新發(fā)送請求 getList()* 3 請求回來成功 hots 數(shù)據(jù)的疊加*/if (this.hasMore) {this.params.skip += this.params.limit;this.getList();} else {//彈窗提示用戶uni.showToast({title: "已經(jīng)沒圖片啦",duration: 2000,});} },

getList()

獲得接口的數(shù)據(jù)

經(jīng)過調(diào)試，發(fā)現(xiàn)視頻中 length的方法并不能判斷是否有圖片數(shù)據(jù)

通過數(shù)據(jù)觀察，發(fā)現(xiàn)當(dāng)沒有數(shù)據(jù)的時(shí)候，接口中code的返回值為1，有數(shù)據(jù)的時(shí)候，接口的code的返回值為0

拼接熱門數(shù)據(jù)（es6）：this.hots = […this.hots, …result.res.vertical];

//獲取接口的數(shù)據(jù) getList() {this.request({url: "http://service.picasso.adesk.com/v3/homepage/vertical",data: this.params,}).then((result) => {console.log(result);//判斷還有沒有下一頁數(shù)據(jù)if (result.code === 1) {this.hasMore = false;return;}//第一次發(fā)請求的時(shí)候if (this.recommends.length === 0) {//推薦模塊this.recommends = result.res.homepage[1].items;//月份模塊this.monthes = result.res.homepage[2];//將時(shí)間戳改成 18號(hào)/月 moment.jsthis.monthes.MM = moment(this.monthes.stime).format("MM");this.monthes.DD = moment(this.monthes.stime).format("DD");console.log(this.monthes);}//獲取熱門數(shù)據(jù)的列表//改成數(shù)組拼接的方式 es6this.hots = [...this.hots, ...result.res.vertical];}); }

首頁 - 專輯

功能分析

使用 setNavigationBarTitle 修改頁面標(biāo)題
發(fā)送請求獲取數(shù)據(jù)
使用 swiper 輪播圖組件
使用 scroll-view 組件實(shí)現(xiàn)分頁
點(diǎn)擊跳轉(zhuǎn)到 專輯詳情頁

setNavigationBarTitle

在組件中動(dòng)態(tài)修改主題

動(dòng)態(tài)修改頁面標(biāo)題

home-album/index.vue

mounted() {//修改頁面標(biāo)題uni.setNavigationBarTitle({title:"專輯"}); }

專輯接口：

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

輪播圖實(shí)現(xiàn)

<template><view><view class="album_swiper"><swiperautoplayindicator-dotscircular><swiper-itemv-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},//輪播圖數(shù)組banner:[],//列表數(shù)組album:[]} } ,mounted() {//修改頁面標(biāo)題uni.setNavigationBarTitle({title:"專輯"});this.getList();},methods:{//獲取接口的數(shù)據(jù)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{//750rpxheight: calc( 750rpx / 2.3);image{height: 100%;}} } </style>

列表數(shù)據(jù)渲染

接口文檔

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 圖片評(píng)論 http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment

出錯(cuò)

net::ERR_PROXY_CONNECTION_FAILED

當(dāng)處理一個(gè)錯(cuò)誤超過一個(gè)小時(shí)，且錯(cuò)誤不在代碼在環(huán)境，可以重新構(gòu)建環(huán)境，而不是一直找錯(cuò)！

總結(jié)

以上是生活随笔為你收集整理的vue小程序开发（四）首页推荐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： C# C++ 互操作：C++向C#输出不
下一篇： at89c2051 定时器用法 c语言编