Implémenter la disposition du flux en cascade et le chargement infini dans le mini-programme WeChat

La mise en page en cascade est une méthode de mise en page populaire, la plus typique est Pinterest.com, le la hauteur de chaque carte est différente, créant une esthétique inégale.

En HTML5, nous pouvons trouver de nombreux plug-ins de mise en page de flux en cascade basés sur jQuery et autres pour créer facilement un tel formulaire de mise en page. Dans le WeChat Mini Program, nous pouvons également obtenir cet effet, mais en raison de certaines caractéristiques du cadre du mini-programme, il existe encore quelques différences dans les idées de mise en œuvre.

Aujourd'hui, nous allons voir comment implémenter cette disposition de flux en cascade dans le mini programme :

Disposition du flux en cascade du mini programme

Ce que nous voulons implémenter est une disposition fixe à 2 colonnes, puis charger dynamiquement l'image données dans ces deux colonnes (l'image chargée sera placée dans la colonne de gauche ou dans la colonne de droite en fonction de la taille réelle de l'image).

/* Style d'un conteneur d'image unique*/.img_item { width: 48%; margin: 1%; display: inline-block; vertical-align: top;
>

Nous savons qu'en HTML, si nous voulons charger dynamiquement des images, nous utilisons généralement new Image() pour les créer Un objet image, puis utilisez-le pour charger dynamiquement l'image pointée par l'URL et obtenir la taille réelle de l'image et d'autres informations. Dans le cadre du mini-programme, aucun objet JS correspondant n'est fourni pour gérer le chargement des images. En fait, nous pouvons utiliser le composant dans wxml pour compléter une telle fonction, même si elle est un peu compliquée, elle peut quand même répondre à nos exigences fonctionnelles.

Nous pouvons transmettre la liaison de données dans la page pour transmettre la requête Charger le informations sur l'image dans wxml, laissez le composant charger la ressource image, puis lorsque l'image est chargée, un traitement ultérieur est effectué via la fonction de traitement d'événements spécifiée par bindload.

Jetons un coup d'œil à la fonction onImageLoad définie dans le fichier Page. Dans celui-ci, nous pouvons obtenir des informations riches sur le composant à partir de l'objet d'événement entrant e, y compris la taille réelle de l'image chargée via celui-ci. Ensuite, nous calculons la taille après avoir mis à l'échelle l'image en fonction de la taille réelle qui doit être affichée sur la page. Ensuite, nous pouvons décider de quel côté placer l'image actuellement chargée en fonction de la hauteur actuelle du contenu accumulé des colonnes de gauche et de droite.

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
        });
    }
})

Voici le code wxml pour afficher l'image en deux colonnes, on peut le voir dans le < ;scroll Sur le composant -view>, nous configurons la fonction d'écoute des événements en utilisant bindscrolltolower. Lors du défilement vers le bas, loadImages sera déclenché pour charger l'ensemble suivant de données d'image, formant ainsi un chargement infini :

<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
  <view style="width:100%">
    <view class="img_item">
      <view wx:for="{{col1}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
    <view class="img_item">
      <view wx:for="{{col2}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
  </view>
</scroll-view>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!