Home > Article > WeChat Applet > Detailed explanation of WeChat applet implementation of following menu effects and loop nested loading of data examples

Detailed explanation of WeChat applet implementation of following menu effects and loop nested loading of data examples

小云云Original: 2018-01-16 09:50:202803browse

本文主要为大家详细介绍了微信小程序实现跟随菜单效果和循环嵌套加载数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

效果如图：

代码如下：

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>

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;}

友情提示：

1、左侧点击样式改变：

利用自身index与点击的元素的index比较。
data-i=“{{获取当前index传给_click保存}}”，
class=”leftlist {{index==_click?'yes':”}}”，
此处index是自身的，如果自身和点击的一致就添加，yes类名，否侧滞空清除yes样式。

2、点击左侧，右侧跟随：

利用scroll-into-view=”{{id}}”，视图会滚动到id为此id的view标签。我是直接从data数据里取得id，也可以直接获取点击元素id。

3、循环嵌套：data数据格式写对，按照官方文档就行。

Detailed explanation of WeChat applet implementation of following menu effects and loop nested loading of data examples

Related articles