レンダリング
このセクションでは、説明のログインコールバックをし、リストのように達成すること。
ログインコールバック：これは、登録完了し、次のステップにされ得ることを意味します。
私のページの例レンダリングの場合、デフォルトはポイント数のリストのように、ログインしていないとし得ることはありません。
ログインに成功し、ユーザー情報のみをリフレッシュしません後、ポイント数と同じ時間のリストのように更新します。
ログインコールバック
私は欠点のコールバック、コードの多くは理解しにくいだろうコールバックレベルである、ここではコールバックレベルもう少しです。
簡単なコールバックの例：
// 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;
}上記は、この紹介です。
世間の注目のスキャンコード番号が、光にプルアップ。