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

巴扎黑
リリース: 2017-04-01 15:36:47
オリジナル
2118 人が閲覧しました

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

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

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

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

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

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

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

1.2 画像コンポーネント

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

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

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

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


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レンダリングを見てみましょうまず

WeChatアプレットリストのプルアップロードとプルダウンリフレッシュの実装 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.rarWeChatアプレットリストのプルアップロードとプルダウンリフレッシュの実装

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート