Quels sont les avantages et les inconvénients du framework layui

L'avantage du framework layui est qu'il s'agit d'un framework léger, simple et adapté au développement back-end ; l'inconvénient est que la technologie n'est pas encore très mature et qu'il est plus difficile d'interagir avec le front. -end car il doit interroger l'opération DOM

layui est un framework frontal modulaire populaire pour sa nature simple mais substantielle. Aujourd'hui, je vais présenter les avantages et les inconvénients du framework layui, qui a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde.

[Cours recommandés : tutoriel javascript]

layui signifiant :

layui est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module. Il suit la méthode d'écriture native HTML/CSS/JS. Bien qu'il soit d'apparence minimaliste, il est riche en contenu et contient de nombreux composants allant du code de base à l'API, qui sont très adaptés au développement rapide d'interfaces. En fait, layui est davantage destiné aux développeurs back-end et il a son propre modèle. Plus léger et plus simple

Les avantages et inconvénients de layui

Les avantages sont les suivants :

( 1) layui est un framework léger, simple et beau. Adapté au développement du mode back-end, il donne de très bons résultats sur les pages côté serveur.

(2) layui est le meilleur framework d'interface utilisateur pour les développeurs back-end. Il est basé sur le pilote DOM. Tant qu'il n'implique pas d'interaction, layui est toujours très bon

Les inconvénients. sont les suivants :

(1) layui est apparu tardivement, et il faut que les autres frameworks front-end soient encore immatures. Il a maintenant été mis à jour vers la version 2. 🎜>

Cas : Implémenter l'effet carrousel via le framework layui

(1) Importer des fichiers layui en externe

(2) Code image du carrousel :

<link rel="stylesheet" type="text/css" href=".\layui-v2.4.5\layui\css\layui.css">
<script src=.\layui-v2.4.5\layui\layui.js></script>

Rendu :

<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
        <div carousel-item>
            <div style="background-color:pink;">图1</div>
            <div style="background-color:lightblue">图2</div>
            <div style="background-color:blue">图3</div>
            <div style="background-color:mediumorchid">图4</div>
            <div style="background-color:orange">图5</div>
        </div>
    </div>
    <script src=.\layui-v2.4.5\layui\layui.js></script>
    <script>
        layui.use(&#39;carousel&#39;, function () {
            var carousel = layui.carousel;
            var ins=carousel.render({
                elem: &#39;#test1&#39;
                , width: &#39;450px&#39;     //设置容器宽度
                , arrow: &#39;always&#39;    //始终显示箭头，可选hover,none
                //,anim: &#39;updown&#39;    //切换动画方式，可选fade,default
                , full: false        //全屏
                , autoplay: true     //自动切换
                , interval: 1000     //自动切换的时间间隔
                , index: 3           //初始化时item索引,默认时0
                , indicator:&#39;inside&#39; //指示器位置，可选outside,none
            });
            //监听轮播切换事件
            carousel.on(&#39;change(carofilter)&#39;, function (obj) { //test1来源于对应HTML容器的 
            lay-filter="test1" 属性值
                console.log(obj.index);     //当前条目的索引
                console.log(obj.prevIndex); //上一个条目的索引
                console.log(obj.item);      //当前条目的元素对象
            });

            //重置轮播
            ins.reload({arrow:&#39;hover&#39;});//将arror从alway变成hover
        });
    </script>

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article pourra aider tout le monde à mieux apprendre le framework layui .

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!