WeChat ミニプログラムにウォーターフォール フロー レイアウトと無限ロードを実装する

ウォーターフォールフローレイアウトは、Pinterest.com で最も一般的なページレイアウト方法であり、各カードの高さが異なり、不均等な美しさを形成します。

HTML5では、このようなレイアウトフォームを簡単に作成できる、jQueryなどをベースとしたウォーターフォールフローレイアウトプラグインが数多く存在します。 WeChat ミニ プログラム でもこの効果を実現できますが、ミニ プログラム フレームワークのいくつかの特性により、実装のアイデアにはまだいくつかの違いがあります。

今日は、ミニプログラムでこの種のウォーターフォールフローレイアウトを実装する方法を見ていきます:

ミニプログラムウォーターフォールフローレイアウト

私たちが実装したいのは固定の 2 列レイアウトで、画像データをこれら 2 つの列に動的にロードします (ロードされた画像は、画像の実際のサイズに基づいて左の列または右の列に配置されます)。

/* 単一画像コンテナのスタイル*/.img_item { width: 48%; margin: 1%;トップ ;

}

HTML では、画像を動的にロードしたい場合、通常 new Image() を使用して画像オブジェクトを作成し、それを使用してURL を動的にロードします。 画像をポイントすると、画像の実際のサイズやその他の情報が取得されます。ミニ プログラム フレームワークでは、画像の読み込みを処理するために提供される対応する JS オブジェクトはありません。実際、wxml の コンポーネントを使用してこのような関数を完成させることができますが、それでも機能要件を満たすことができます。

Page でデータ バインディングを渡して、wxml にロードされる画像情報を渡すことができます。 , コンポーネントに画像リソースをロードさせ、画像がロードされると、bindload で指定されたイベント処理関数を通じてさらなる処理が行われます。

Page ファイルで定義されている onImageLoad 関数を見てみましょう。この中で、受信イベント オブジェクト e から コンポーネントに関する豊富な情報を取得できます。これには、コンポーネントを通じてロードされた画像の実際のサイズも含まれます。次に、ページに表示する必要がある実際のサイズに応じて画像を拡大縮小した後のサイズを計算します。次に、左列と右列の現在の累積されたコンテンツの高さに基づいて、現在ロードされている画像をどちら側に配置するかを決定できます。

let col1H = 0;let col2H = 0;

Page({    data: {        scrollH: 0,        imgWidth: 0,        loadingCount: 0,        images: [],        col1: [],        col2: []
   },    onLoad: function () {
       wx.getSystemInfo({            success: (res) => {                
       let ww = res.windowWidth;                
       let wh = res.windowHeight;                
       let imgWidth = ww * 0.48;                
       let scrollH = wh;                
       this.setData({                    
       scrollH: scrollH, 
       imgWidth: imgWidth
               });                //加载首组图片
               this.loadImages();
           }
       })
   },    onImageLoad: function (e) {        
   let imageId = e.currentTarget.id;        
   let oImgW = e.detail.width;         //图片原始宽度
       let oImgH = e.detail.height;        //图片原始高度
       let imgWidth = this.data.imgWidth;  //图片设置的宽度
       let scale = imgWidth / oImgW;        //比例计算
       let imgHeight = oImgH * scale;      //自适应高度

       let images = this.data.images;        let imageObj = null;        
       for (let i = 0; i < images.length; i++) {            let img = images[i];            
       if (img.id === imageId) {
               imageObj = img;                break;
           }
       }

       imageObj.height = imgHeight;        
       let loadingCount = this.data.loadingCount - 1;        
       let col1 = this.data.col1;        
       let col2 = this.data.col2;        //判断当前图片添加到左列还是右列
       if (col1H <= col2H) {
           col1H += imgHeight;
           col1.push(imageObj);
       } else {
           col2H += imgHeight;
           col2.push(imageObj);
       }        let data = {            
       loadingCount: loadingCount,            col1: col1,            col2: col2
       };        //当前这组图片已加载完毕，则清空图片临时加载区域的内容
       if (!loadingCount) {
           data.images = [];
       }        this.setData(data);
   },    loadImages: function () {        let images = [
           { pic: "../../images/1.png", height: 0 },
           { pic: "../../images/2.png", height: 0 },
           { pic: "../../images/3.png", height: 0 },
           { pic: "../../images/4.png", height: 0 },
           { pic: "../../images/5.png", height: 0 },
           { pic: "../../images/6.png", height: 0 },
           { pic: "../../images/7.png", height: 0 },
           { pic: "../../images/8.png", height: 0 },
           { pic: "../../images/9.png", height: 0 },
           { pic: "../../images/10.png", height: 0 },
           { pic: "../../images/11.png", height: 0 },
           { pic: "../../images/12.png", height: 0 },
           { pic: "../../images/13.png", height: 0 },
           { pic: "../../images/14.png", height: 0 }
       ];        let baseId = "img-" + (+new Date());       
        for (let i = 0; i < images.length; i++) {
           images[i].id = baseId + "-" + i;
       }        this.setData({            
       loadingCount: images.length,            images: images
       });
   }

})

  if (col1H <= col2H) {
            col1H += imgHeight;
            col1.push(imageObj);
        } else {
            col2H += imgHeight;
            col2.push(imageObj);
        }        let data = {            loadingCount: loadingCount,            col1: col1,            col2: col2
        };        //当前这组图片已加载完毕，则清空图片临时加载区域的内容
        if (!loadingCount) {
            data.images = [];
        }        this.setData(data);
    },    loadImages: function () {        let images = [
            { pic: "../../images/1.png", height: 0 },
            { pic: "../../images/2.png", height: 0 },
            { pic: "../../images/3.png", height: 0 },
            { pic: "../../images/4.png", height: 0 },
            { pic: "../../images/5.png", height: 0 },
            { pic: "../../images/6.png", height: 0 },
            { pic: "../../images/7.png", height: 0 },
            { pic: "../../images/8.png", height: 0 },
            { pic: "../../images/9.png", height: 0 },
            { pic: "../../images/10.png", height: 0 },
            { pic: "../../images/11.png", height: 0 },
            { pic: "../../images/12.png", height: 0 },
            { pic: "../../images/13.png", height: 0 },
            { pic: "../../images/14.png", height: 0 }
        ];        let baseId = "img-" + (+new Date());        
        for (let i = 0; i < images.length; i++) {
            images[i].id = baseId + "-" + i;
        }        this.setData({            loadingCount: images.length,            images: images
        });
    }
})

これは、画像を2列に表示するwxmlコードです。 で見ることができます。コンポーネントでは、bindscrollto lower を使用してイベント リスニング関数を設定します。一番下までスクロールすると、loadImages がトリガーされて次の画像データ セットがロードされ、無限ロードが形成されます。

以上がWeChat ミニプログラムにウォーターフォール フロー レイアウトと無限ロードを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。