Le composant frontal de couche dans layui implémente la fonction d'affichage d'image

Cet article présente principalement la méthode de réalisation de la fonction d'affichage d'image du composant frontal de couche dans layui. Il analyse la méthode de fonctionnement et les précautions associées du composant de couche dans layui pour appeler la fonction d'affichage d'image sous forme d'exemples. . Il fournit également des téléchargements de code source de couches et de layui, qui sont nécessaires. Les amis peuvent s'y référer, j'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit comment le composant frontal de couche implémente la fonction d'affichage d'image. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Pour implémenter la fonction d'affichage d'image : couche

1 Nous introduisons ici un composant frontal de couche

layer est un composant de couche élastique Web très apprécié, elle propose une gamme complète de solutions,

s'engage à servir les développeurs de tous niveaux, votre page aura facilement une expérience d'exploitation riche et conviviale.

Quelques points à noter ici : avant d'utiliser le composant frontal de couche, nous devons introduire le fichier js de la couche

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>

Remarque : le fichier layer.js doit être introduit après jquery, car layer.js Il est basé sur jquery.js !

2.json

Json est également requis pour implémenter la fonction d'affichage d'image :

L'utilisation spécifique est la suivante :

{ //您服务端接口需严格按照下述格式返回
    "status": 1,  //请求的状态，1表示成功，其它表示失败
    "msg": "", //状态提示语
    "title": "",  //相册标题
    "id": number型,  //相册id
    "start": 0, //初始显示的图片序号，默认0
    "data": [  //相册包含的图片，数组格式
      {
        "name": "", //图片名
        "pid": number型, //图片id
        "src": "", //原图地址
        "thumb": "", //缩略图地址
        "area": [638, 851] //原图宽高
      }
    ]
}

Utiliser un tel comme :

est liée comme ci-dessus et doit être exacte

StringBuilder str = new StringBuilder();

Le résultat final renvoyé est le suivant :

Recommandations associées :

return str.toString();

En regardant la composantisation frontale de Vue & React à partir des opérations DOM,

Les données de chargement d'initialisation des composants de table Layui et d'autres exemples sont expliqués dans détail

pagination encapsulée jQuery Explication détaillée des composants

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!