全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能

效果图

这一节介绍，登录回调 以及 喜欢列表 的实现。

登录回调：这里是指在获取登录完成之后，再进行下一步的操作。

比如效果图中我的页面，默认是未登录状态，积分和喜欢列表的数量都没有获取到。
而登录成功之后不仅将用户信息刷新，同时将积分和喜欢列表的数量刷新。

登录回调

我这里实现的回调层级有点多，这也是回调的一个弊端，当回调层级很多代码就会很难理解。

一个简单的回调例子：

// 1、获取网络数据
_getDataFromServer(userInfo, callBack){...callBack()
}
// 2、点击按钮获取用户信息
getUserInfo: function(e) {...// 发送网络请求获取服务器用户数据_getDataFromServer(e.detail.userInfo, this._doNextByLogin)
},
// 3、处理回调结果
_doNextByLogin() {console.log("登录之后回调，刷新数据")},

上面的代码就是一个完整的回调流程。

定义回调方法，在合适的位置进行回调。
调用回调方法
执行回调函数

由于登录回调的代码过于长...，这里就不贴出来了。基本的实现流程就是使用了回调。

点赞列表

点赞列表的入口在【我的-喜欢列表】。

如果用户未登录，显示的是空列表（还应该提示用户登录）；
如果用户已登录，则显示用户的点赞列表。

主要的wxml如下：

<view class="book-container" wx:else>// 点赞布局：图片+名称<block wx:if="{{bookList.length > 0}}"><block wx:for="{{bookList}}" wx:key="index"><view class="book bg-white" hover-class="book-hover" data-id="{{item.bkid}}" data-file="{{item.bkfile}}" catchtap="toBookDetail"><view class="book-image"><image src="{{item.bkcover}}" mode="scaleToFill"></image></view><view class="book-name"><text>{{ item.bkname }}</text></view></view></block></block>// 空布局<block wx:else><view class="empty-container"><image class="userinfo-avatar" src="../../images/sad.png" background-size="cover"></image><view class="donut-container">空空如也</view></view></block>
</view>

主要的wxss如下：

// 点赞列表样式
.book-container {display: flex;box-sizing: border-box;flex-direction: row;flex-wrap: wrap;align-content: space-between;padding: 50rpx 0;
}
// 书籍样式
.book {margin: 0 18rpx;margin-bottom: 50rpx;width: 208rpx;height: 380rpx;box-shadow: 0 0 15rpx #cdcdcd;display: flex;flex-direction: column;justify-content: center;border-radius: 10rpx;
}
// 点击图书抖动的动画
.book-hover {transform: scale(0.96,0.96);transition: all 1 ease 0;
}
// 书籍样式
.book-image > image {width: 100%;height: 300rpx;
}
// 书籍名称
.book-name > text {margin-top: 10rpx;display: flex;justify-content: center;align-items: center;color: #1e1e1e;font-size: 25rpx;
}

以上就是本次的介绍。

扫码关注公众号，轻撩即可。

全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能相关推荐

全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果首页功能主要有搜索(下篇文章介绍) 图书列表图书列表分析一波: 列表是水平滑动点击列表会有按压效果:布局整体缩小每个布局的信息从上到下排列分别是:图片.书名.作者.出版社每个布局 ...
全栈项目|小书架|微信小程序-实现搜索功能
效果图上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
全栈项目|小书架|微信小程序-书籍详情功能实现
效果图实现分析从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
HaaS EDU物联网项目实战：微信小程序实现云养花
HaaS EDU K1是一款高颜值.高性能.高集成度的物联网开发板,板载功能强大的4核(双核300Mhz M33+双核1GHz A7)主芯片,2.4G/5G双频Wi-Fi,双模蓝牙(经典蓝牙/BLE) ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
从开源项目学做微信小程序
1. 项目名称:灵动电商之微信小程序端项目地址:黄秀杰/lendoo-wx - 码云 2. 项目名称:高仿网易 B2C 商城项目简介:本项目是基于 Node.js + MySQL 开发的高仿网易严 ...
小程序源码：修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
小程序源码：炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...

全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能

效果图

登录回调

点赞列表

全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能相关推荐

最新文章

热门文章