Full stack items | small bookcase | micro-channel small program - and get thumbs up sign in the callback function list

Renderings

This section describes, login callback and like the list to achieve.

Login callback: This refers to obtaining registration is completed, and then to the next step.

For example renderings in my page, the default is not logged in, like a list of the number of points and do not get to.
After a successful login and user information will not only refreshing, like a list of the number of points and the same time to refresh.

Login callback

I am here callback level a little bit more, which is a drawback callback, the callback level when a lot of code will be difficult to understand.

A simple callback example:

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

The code above is a complete callback process.

• Defined callback method callback in place.
• Call the callback method
• Callback function

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

Thumbs list

Like the point of entry in the list of [my - like list].

If the user is not logged in, displays an empty list (it should also prompt the user to log in);
if the user is logged in, thumbs list of users is displayed.

The main wxmlas follows:

<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>

The main wxssas follows:

// 点赞列表样式
.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;
}

Above is this introduction.

---

Scan code number of public attention, pull up to the light.