WeChatアプレットリストのプルアップロードとプルダウンリフレッシュの実装

この記事では主にWeChatアプレットでリストのプルアップ読み込みとプルダウン更新を実装する方法を紹介します。非常に良い基準値を持っています。以下のエディターで見てみましょう

WeChat ミニ プログラムは、9 月 21 日以降、最もホットな用語であると言えます。もちろん、多くのアプリ開発者は、WeChat ミニ プログラムを心配しています。 Android 開発者として、私は Android の登場によってモバイル アプリが破壊され、モバイル プログラマーが失業するとは考えていません。たとえそうなったとしても、それを実現するには 1 ～ 2 年の移行と磨きがかかるでしょう。

WeChat ミニ プログラムが今日のモバイル開発環境を破壊できるかどうかに関係なく、私たちは受け入れて学ぶという前向きな姿勢を持たなければなりません。新しいテクノロジーを拒否するわけではないので、最初に WeChat ミニ プログラム開発ツールをすばやく構築することが大切です。それでは、リストのプルアップ読み込みとプルダウン更新 (集約データ プラットフォームを介して WeChat ニュースを取得する) の実装を学び始めましょう。

1. いくつかのコンポーネントを紹介します

1.1 スクロールビューコンポーネント

注: 垂直スクロールを使用する場合は、固定の高さを指定し、WXSS を通じて高さを設定する必要があります。

1.2 画像コンポーネント

注: モードには 12 のモードがあり、そのうち 3 つはスケーリング モード、9 つはトリミング モードです。

1.3 アイコンコンポーネント

iconType: [ 
‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', 
‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', 
‘info_circle', ‘cancel', ‘search', ‘clear' 
]

2. リストのプルアップロードとプルダウンリフレッシュの実装

2.1レンダリングを見てみましょうまず

2.2 ロジックは非常に簡単で、コードを入力するだけです

2.2.1 詳細.wxml レイアウト ファイル

2.2.1詳細.js ロジック コード ファイル

<loading hidden="{{hidden}}" bindchange="loadingChange">
 加载中...
 </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh">
 <view wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>刷新中...</text></view>
 <view wx:else style="display:none" ><text></text></view>
 <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap" 
 data-title="{{item.title}}" >
 <image style=" width: 50px;height: 50px;margin: 20rpx;" src="{{item.firstImg}}" ></image>
 <view class="eee" > 
 <view style="margin:5px;font-size:8px"> 标题:{{item.title}}</view>
 <view style="margin:5px;color:red;font-size:6px"> 来源:{{item.source}}</view>
 </view>
</view>
<view class="tips1">
 <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>玩命的加载中...</text></view>
 <view wx:else><text>没有更多内容了</text></view>
 </view>
 </scroll-view>

最終効果:

ニュースの詳細は後で実装されます

コード アドレス: http://xiazai.jb51.net/201703/yuanma/WeiXinProject -master_jb51.rar

以上がWeChatアプレットリストのプルアップロードとプルダウンリフレッシュの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。