简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  Applet WeChat  >  Explication détaillée de la mise en œuvre de l'applet WeChat des effets de menu suivants et du chargement imbriqué en boucle des exemples de données

Explication détaillée de la mise en œuvre de l'applet WeChat des effets de menu suivants et du chargement imbriqué en boucle des exemples de données

小云云
小云云original
2018-01-16 09:50:202773parcourir

Cet article présente principalement l'applet WeChat en détail pour implémenter l'effet de menu suivant et le chargement imbriqué des données. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

L'effet est le suivant :

Le code est le suivant :

wxml


//使用循环嵌套data数据格式写对即可
<scroll-view class="left" scroll-y>  
  <view wx:for="{{left}}" class="leftlist {{index==_click?&#39;yes&#39;:&#39;&#39;}}" data-i="{{index}}" bindtap="tap">
   {{item.txt}}
  </view>
 </scroll-view>

<scroll-view class="right" scroll-y bindscroll="scroll" scroll-into-view="{{toView}}">
  <view id="{{item.id}}" wx:for="{{right}}">

   <view class="title">
    <text class="line"></text>
    {{item.txt}}
    <text class="line"></text>
   </view> 

   <view class="li" wx:for="{{item.li}}">
    <image src="{{item.src}}"></image>
    <text class="name">{{item.name}}</text>
   </view>

  </view>
 </scroll-view>

js


Page({
 data: {
  toView: &#39;red1&#39;,
  _click:0,
  left: [{ txt: &#39;新品&#39;, id: &#39;new&#39; }, { txt: &#39;手机&#39;, id: &#39;phone&#39; }, { txt: &#39;电视&#39;, id: &#39;mv&#39; }, { txt: &#39;电脑&#39;, id: &#39;computer&#39; }],
  right: [
   { txt: &#39;新品&#39;, id: &#39;new&#39;,li: [{ src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米noto&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米mix&#39; }, { src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米5c&#39; }, { src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米notp&#39; }, { src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米note5&#39; }, { src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米6&#39; }]}, 
   { txt: &#39;手机&#39;, id: &#39;phone&#39;,li: [{ src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米6s&#39; }, { src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米max&#39; }, { src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米5s&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米li&#39; }, { src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米4&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米max&#39; }]}, 
   { txt: &#39;电视&#39;, id: &#39;mv&#39;, li: [{ src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米6&#39; }, { src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米mix&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米7s&#39; }, { src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米2&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米note7&#39; }, { src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米8&#39; }] }, 
   { txt: &#39;电脑&#39;, id: &#39;computer&#39;, li: [{ src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米2&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米mix&#39; }, { src: &#39;../../assets/images/max2.jpg&#39;, name: &#39;小米max&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米6&#39; }, { src: &#39;../../assets/images/max3.jpg&#39;, name: &#39;小米note&#39; }, { src: &#39;../../assets/images/max1.jpg&#39;, name: &#39;小米max&#39; }] }]
 },

 scroll: function (e) {
  console.log(e)//右侧列表滑动-左侧列表名称样式跟着改变，然而我不会写，搁置中，谁会告诉我，谢谢！
 },
 tap: function (e) { 
  var j = parseInt(e.currentTarget.dataset.i);
  this.setData({
   toView: this.data.left[j].id,//控制视图滚动到为此id的<view>
   _click:j           //控制左侧点击后样式
    })
 },
})

wxss


page{border-top:1px solid #f6f6f6;}

.left{
 height:100%;
 width: 19%;
 display: inline-block;
 background:#fff;
 text-align:center;
 border-right:1px solid #eee;
 }
.leftlist{
 font-size:12px;
 padding:10px;
 }

.right{
 height:100%;
 width: 80%;
 display: inline-block;
 background:#fff;
 text-align:center;
 }

.line{
 width:15px;
 height:1px;
 background:#ddd;
 display:inline-block;
 vertical-align:super;
 margin:0 15px;
}

.li{ 
 height:10%;
 width:30%;
 display:inline-block;
 text-align:center;
}

.li image{width:60px;height:60px;}

.li .name{
 font-size:12px;
 display:block;
 color:#888;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

.title{padding:20px 0;}
.yes{color: #f99;font-size: 14px;}

Rappel amical :

1. Changez le style de clic à gauche :

Utilisez son propre index pour comparer avec l'index de l'élément cliqué.
data-i="{{Obtenez l'index actuel et transmettez-le à _click pour enregistrer}}",
class="leftlist {{index==_click?'yes':"}}",
ici L'index est le sien. S'il est cohérent avec le clic, ajoutez le nom de la classe yes. Sinon, effacez le style yes. En utilisant scroll-into-view="{{id}}", la vue défilera jusqu'au. afficher la balise avec cet identifiant. J'obtiens l'identifiant directement à partir des données, ou je peux également obtenir directement l'identifiant de l'élément cliqué >3. Recommandations associées :


Implémentation simple en JS du partage d'exemples de données de chargement glissant

Exemple détaillé de la façon dont ajax implémente la fonction de chargement de données

Exemple détaillé de glissement de l'écran pour charger des données sur la page de l'applet WeChat

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du cycle de vie des mini-programmes WeChatArticle suivant：Explication détaillée du cycle de vie des mini-programmes WeChat

Articles Liés

Voir plus