レイヤーフロントエンドコンポーネント画像表示機能

今回はnotesとは何かを紹介します。実際の事例を見てみましょう。

写真表示機能の実装：layer

1. ここでレイヤーフロントエンドコンポーネントを紹介します

Layer は、優れた評判を持つ Web エラスティック レイヤー コンポーネントであり、あらゆるレベルの開発者にサービスを提供することに尽力しています。

公式サイトのダウンロードアドレス：http://layer.layui.com/

または、ここをクリックしてください

このサイトからダウンロードしてください。

具体的な使用方法は中にあります

ここでいくつかの点に注意してください: レイヤー フロントエンド コンポーネントを使用する前に、レイヤーの js ファイルを導入する必要があります

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

注意:layer.js は jquery.js に基づいているため、layer.js ファイルは jquery の後に導入する必要があります。

2.json

画像表示機能を実装するには、json:

も必要です 具体的な使い方は以下の通りです:

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

次のように使用します:

StringBuilder str = new StringBuilder();

append メソッドは上記のようにリンクされており、正確である必要があります

最後に返されたものは次のとおりです:

return str.toString();

具体的な使用方法は、公式 Web サイトでもご覧いただけます

http://layer.layui.com/

この記事の事例を読んだ後は、その方法をマスターしたと思います。さらに興味深い情報については、その他の情報に注目してください。関連記事はphp中国語サイトにあります！

推奨読書:

JSタイマーを使用して進行状況バーを実装する

vue-routerの使用方法の詳細な説明

以上がレイヤーフロントエンドコンポーネント画像表示機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。