ミニプログラムページのイベント

1. プルダウン更新イベント

---

1. プルツーリフレッシュとは何ですか

• 下拉刷新モバイル端末にぴったりの用語で、画面上で指を下にスライドさせて滑らせる動作を指します重新加载页面数据。

2. プルツーリフレッシュを有効にする

3. プルダウン更新ウィンドウのスタイルを構成します。

4. ページのプルダウン更新イベントをリッスンします。

• ページの .js ファイルでは、onPullDownRefresh()関数を通じて現在のページのプルダウン更新イベントを監視できます。
• たとえば、ページの wxml には次の UI 構造があり、ボタンをクリックしてカウント値を +1 増やします。
  
• ページのプルダウン更新イベントがトリガーされたときに、count の値を 0 にリセットする場合のサンプルコードは次のとおりです。
  

5.プルトゥリフレッシュ効果を停止する

• プルダウン更新の処理後は、プルダウン更新の読み込み効果が常に表示されるため、不会主动消失プルダウン更新の読み込み効果を手動で非表示にする必要があります。この時点で、呼び出しによりwx.stopPullDownRefresh()現在のページのプルダウンの更新を停止できます。サンプルコードは次のとおりです。
  

2. 懸垂ボトミングイベント

---

1. プルアップボトミングとは

• 上拉触底モバイル端末にぴったりの用語で、画面上で指を引き上げたり、スライドさせたりすることで動作します加载更多数据。

2. ページのプルアップボトミングイベントをリッスンします。

• ページの .js ファイルでは、onReachBottom()関数を通じて現在のページのプルアップボトミング イベントを監視できます。サンプルコードは次のとおりです。
  

3. プルアップのボトミング距離を設定します

3.底打ちの場合

---

1.ケースエフェクト表示

2. 事例の実施手順

1. ランダムな色を取得するメソッドを定義する
2. ページ読み込み時に初期データを取得する
3. UI構造をレンダリングしてページ効果を美しくする
4. 在上拉触底时调用获取随机颜色的方法
5. 添加oading 提示效果
6. 对上拉触底进行节流处理

1. ランダムな色を取得するメソッドを定義する
   

2. ページ読み込み時に初期データを取得する
   

3. UI構造をレンダリングしてページ効果を美しくする

4. 在上拉触底时调用获取随机颜色的方法
   

5. 添加oading 提示效果
   

6. 对上拉触底进行节流处理
   

3. 完全なコード

• contact.js

Page({
    
    
  // 页面的初始数据
  data: {
    
    
    colorList: [],
    isloding: false
  },
  getColors() {
    
    
    this.setData({
    
    
      isloding: true
    })
    // 需要展示 loading 效果
    wx.showLoading({
    
    
      title: '数据加载中...'
    })
    wx.request({
    
    
      url: 'https://www.escook.cn/api/color',
      method: 'get',
      success: ({
     
      data: res }) => {
    
    
        this.setData({
    
    
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {
    
    
        wx.hideLoading()
        this.setData({
    
    
          isloding: false
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.getColors()
  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
    
    
    if (this.data.isloding) return

    this.getColors()
  },
})

• contact.wxml

<view wx:for="{
    
    {colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
    
    {item}});">{
    
    {
    
    item}}</view>

• contact.wxss

.num-item {
    
    
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
  color: black;
}