101コラムでは、我々は説明し、自動的に機能を底ロードアプレットのリストを達成するために、クラウドデータベースの開発を使用する方法をどのように我々はそれを達成する必要がありアプレットのリストを更新引っ張って対応し、？この列には、誰にとっても答えられます。
理由
我々はプルリフレッシュ機能を達成する必要がある場合は、アプレットでは、我々はのアプレットページを監視する必要があるonPullDownRefreshイベントを、私たちは、ページの更新と更新データを達成するために、この方法でロードおよび交換データを達成することができます。
実装コード
通常の状況下でのプルはリフレッシュし
、まずはプルリフレッシュ機能実現の一般的なケースを見てみましょう。「一般的には、」ここにあなたが使用していない意味scroll-viewシーンのコンポーネントを、または水平使用してscroll-view、リストではなく、建物の、ページ内に直接構築され、シーンをscroll-view内蔵し。
我々はページを更新するために引き上で実現したい場合は、この場合には、あなたが必要とする、または設定ページには、オプションを追加し、それを構成します。app.jsonwindowenablePullDownRefreshtrue
// app.json
{
...
"window":{
"enablePullDownRefresh":true
}
...
}
// page.json
{
"enablePullDownRefresh":true
}構成された後、我々は設定を開始することができます。私たちは、このページでは、ページを更新し、私たちがする必要がプルダウンに実装する必要がPageコンストラクタの追加onPullDownRefreshモニタ機能を。
Page({
onPullDownRefresh:function(){
// 这里我们需要进行页面的加载。
}
})我々はする必要がありonPullDownRefresh、我々は次のように一般的にコードが書かれ、更新して交換したデータを有効にすると、コードのクエリデータを追加し、機能します：
Page({
onPullDownRefresh:function(){
let db = wx.cloud.database();
// 查询数据
db.collection('records').get().then(res => {
// 更新数据
this.setData({
data: res.data
},()=>{
wx.stopPullDownRefresh(); // 数据同步完成后，停止掉上拉刷新的动画效果。
})
}).catch(err => {
console.error(err)
})
}
})上記のコードでは、私たちonPullDownRefreshのクラウド開発のデータベースクエリメソッドを追加する方法、およびデータベースクエリに成功コールバックメソッドに参加しsetData、当社のアプレットページのデータを更新することができることを保証するために、データを更新する方法。
でsetDataコールバックメソッド、私は上の参加wx.stopPullDownRefreshのコール、このAPIは、小さなプログラムオフに停止することができPullDownRefresh、それによって失われたデータの更新を避け、ダイナミック効率のを完了したが、ページがダウンロードされた状態の低下にまだあります。
このように、我々はリフレッシュするプルの大半でシーンの状況に対処するのに十分持っています。
特別な事情がリフレッシュを引きます
越えて直接ページにプルリフレッシュAPIを使用することに加えて、別のシナリオが存在します、我々は、このようなビデオ再生ページテンセント映像として、ローリング部分の下に、ページの上部を固定するということです。このページは、ビデオプレーヤーの上に配置され、以下の配置は、scroll-viewビデオプレーヤーの固定されたトップの効果を達成するために、スライドを完成させます。この場合、我々はそれを達成するためにどのようにリフレッシュするために引っ張るべきですか？
実際には、非常に単純な、私たちは使用する必要があるscroll-viewのコンポーネントbindscrolltoupperプルリフレッシュ機能を完了するために、イベントを。
具体的な実装では、我々はする必要がありscroll-view、対応する構成コンポーネントに参加します。
<scroll-view upper-threshold="50" bindscrolltoupper="onTopper">
<!--- 具体的内容 -->
</scroll-view>次いで、特定のイベントトリガを含む対応するページで、次の参照コード：
Page({
onTopper:function(){
wx.startPullDownRefresh();
let db = wx.cloud.database();
db.collection('records').get().then(res => {
// 更新数据
this.setData({
data: res.data
},()=>{
wx.stopPullDownRefresh(); // 数据同步完成后，停止掉上拉刷新的动画效果。
})
}).catch(err => {
console.error(err)
})
}
})このように、我々はScrollViewがプル効果の下に実現以内に達成することができます。
私たちが直接影響を持っていないので、このコードでは、ページ上の引き金を引くので、ここで私たちが使用するwx.startPullDownRefreshページ上のトリガー効果を引き、その後、データのロードを完了するためにクラウドを開発するためのAPIを使用し、完了後に、負荷呼び出すためwx.stopPullDownRefreshの方法を、停止リフレッシュアニメーションを引き出します。
このように、我々はない場合でも、直接イベントページをトリガしますが、同様の結果ページを達成することができます。
概要
プルリフレッシュを達成するために、データの高負荷、あなたが唯一の特定の方法で呼び出す必要が関連する機能、使用中の実際には、非常に単純な、私たちの非常に人気の関数であり、あなたはプルリフレッシュ機能を実現することができます。
あなたが開発したCloudBase物語/技術的な経験ハンズオンのクラウド関連技術についての詳細を知りたい場合は、コードの懸念[開発]と番号にとてもテンセント公開をスキャンしてください
