L'applet WeChat implémente une disposition de flux en cascade et un chargement illimité

La mise en page en cascade est une mise en page populaireLa plus typique l'un est Pinterest.com. La hauteur de chaque carte est différente, formant une beauté inégale

Dans HTML5, nous pouvons en trouver de nombreux basés sur celle-ci. 🎜>jQuery peut facilement créer une telle mise en page. Dans les mini-programmes WeChat, nous pouvons également obtenir cet effet, mais en raison du mini-programme framework Il existe encore quelques différences dans les idées de mise en œuvre pour certaines fonctionnalités.

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

Mini programme de disposition de flux en cascade

Ce que nous voulons implémenter est une disposition fixe à 2 colonnes, puis charger dynamiquement les données

image dans ces deux colonnes (pendant le chargement, l'image entrante sera placée dans la colonne de gauche ou de droite colonne en fonction de la taille réelle de l'image).

/* 单个图片容器的样式 */
.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 créer un image objet , puis utilisez-le pour charger dynamiquement une image pointée par l'URL et obtenir la taille réelle de l'image et d'autres informations. Il n'y a pas d'objet JS correspondant pour gérer l'image. En fait, nous pouvons utiliser le composant dans wxml pour compléter une telle fonction, même si cela est un peu compliqué, cela peut toujours être fait pour répondre à nos exigences fonctionnelles.

nous pouvons transmettre les informations de l'image à charger dans wxml via la

<!-- 在页面上放一个隐藏区域，并用image组件去加载一个或多个图片资源 -->
<view style="display:none">
  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>

liaison de données

et laisser le composant charger la ressource image, puis lorsque l'image est chargée, utilisez. la fonction de traitement d'événement spécifiée par bindload pour un traitement ultérieur Jetons un coup d'œil à la définition dans le fichier Page onImageLoad. des informations riches sur le composant de l'objet d'événement entrant e, y compris la taille réelle de l'image chargée via celui-ci, puis nous affichons l'image en fonction des besoins réels sur la page pour calculer la taille après la mise à l'échelle. même rapport. Ensuite, nous pouvons décider sur 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

Voici le code wxml affiché dans le. deux colonnes d'images, nous pouvons voir que sur le composant , nous avons configuré 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 de données d'image suivant. , formant ainsi un chargement infini :

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

})

D'accord, c'est un exemple très simple. Si vous avez une meilleure méthode, n'hésitez pas à la partager.

<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!