検索
ホームページWeChat アプレットミニプログラム開発WeChatアプレットリストのプルアップロードとプルダウンリフレッシュの実装

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

Apr 01, 2017 pm 03:36 PM
プルダウンして更新しますWeChat アプレット

この記事では主に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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター