Méthode d'implémentation de la disposition de commutation linéaire développée en PHP dans le mini-programme WeChat

Avec la popularité croissante des mini-programmes WeChat, de plus en plus de développeurs commencent à essayer de combiner le développement de mini-programmes avec PHP. Parmi elles, la disposition de commutation linéaire est l'une des méthodes de disposition couramment utilisées dans les mini-programmes. Cet article explique comment utiliser PHP pour implémenter la disposition de commutation linéaire dans les mini-programmes WeChat.

1. Qu'est-ce que la disposition de commutation linéaire ?

La disposition de commutation linéaire fait référence à un moyen d'afficher un ensemble de vignettes de données dans un mini-programme, et le contenu affiché peut être commuté en glissant vers la gauche ou la droite. Ce type de disposition est relativement courant dans les mini-programmes. Par exemple, le graphique carrousel dans les mini-programmes est une disposition de commutation linéaire.

2. Étapes de mise en œuvre

1. Ajoutez le composant wx:scroll-view à la page du mini programme et activez la barre de défilement horizontale :

<scroll-view class="list" scroll-x="true">
    <!-- 循环渲染数据 -->
</scroll-view>

2. Obtenez les données qui doivent être affichées en PHP et utilisez le Méthode json_encode() pour le convertir au format JSON :

$data = array(
    array('title'=>'标题1', 'desc'=>'描述1'),
    array('title'=>'标题2', 'desc'=>'描述2'),
    // ...
);
echo json_encode($data);

3. Envoyez une requête au serveur PHP via la méthode wx.request dans l'applet et restituez les données JSON renvoyées dans le composant scroll-view :

wx.request({
    url: 'http://example.com/getData.php',
    success: function(res) {
        var data = res.data;
        var html = '';
        for (var i=0; i<data.length; i++) {
            html += '<view class="item">';
            html += '<view class="title">' + data[i].title + '</view>';
            html += '<view class="desc">' + data[i].desc + '</view>';
            html += '</view>';
        }
        // 将组装好的html渲染到scroll-view组件中
        $('.list').html(html);
    }
});

4. Contrôlez l'effet de glissement. Contrôlez la distance de glissement en définissant l'attribut scroll-left du composant scroll-view et liez cet attribut aux données de la page du mini programme pour obtenir l'effet de glissement :

data: {
    scrollLeft: 0
},
onReady: function() {
    var that = this;
    setInterval(function() {
        var scrollLeft = that.data.scrollLeft + 300;
        that.setData({
            scrollLeft: scrollLeft
        });
    }, 3000);
}

À ce stade, une disposition de commutation linéaire basée sur PHP est réalisé.

3. Notes

1. Les données JSON renvoyées par PHP doivent être au format JSON standard, sinon elles ne peuvent pas être analysées normalement dans le mini programme.
2. Le style du composant peut être personnalisé et modifié selon les besoins, mais veillez à ce que le nom de la classe soit cohérent avec le nom dans la feuille de style.
3. Dans le code qui contrôle l'effet de glissement, la valeur du paramètre de la méthode setInterval peut être personnalisée et modifiée en fonction des besoins. Les paramètres de cette méthode représentent le temps d'intervalle de glissement.

IV.Résumé

Il n'est pas difficile d'utiliser PHP pour implémenter une disposition de commutation linéaire dans l'applet WeChat. Il vous suffit de convertir les données au format JSON via la méthode json_encode() et de les restituer dans le composant scroll-view, puis définissez-le via Utilisez simplement les propriétés du composant scroll-view pour contrôler l'effet de glissement. J'espère que cet article pourra aider les développeurs qui ont besoin d'utiliser PHP pour implémenter une disposition de commutation linéaire dans de petits programmes.

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!