本文實例為大家分享了微信小程序實現跟隨菜單效果、微信小程序循環嵌套加載數據，供大家參考，具體內容如下
效果如圖：
代碼如下：
wxml
//使用循環嵌套data數據格式寫對即可<scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" 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: 'red1', _click:0, left: [{ txt: '新品', id: 'new' }, { txt: '手機', id: 'phone' }, { txt: '電視', id: 'mv' }, { txt: '電腦', id: 'computer' }], right: [ { txt: '新品', id: 'new',li: [{ src: '../../assets/images/max1.jpg', name: '小米noto' }, { src: '../../assets/images/max1.jpg', name: '小米mix' }, { src: '../../assets/images/max3.jpg', name: '小米5c' }, { src: '../../assets/images/max2.jpg', name: '小米notp' }, { src: '../../assets/images/max2.jpg', name: '小米note5' }, { src: '../../assets/images/max2.jpg', name: '小米6' }]}, { txt: '手機', id: 'phone',li: [{ src: '../../assets/images/max2.jpg', name: '小米6s' }, { src: '../../assets/images/max3.jpg', name: '小米max' }, { src: '../../assets/images/max2.jpg', name: '小米5s' }, { src: '../../assets/images/max1.jpg', name: '小米li' }, { src: '../../assets/images/max3.jpg', name: '小米4' }, { src: '../../assets/images/max1.jpg', name: '小米max' }]}, { txt: '電視', id: 'mv', li: [{ src: '../../assets/images/max3.jpg', name: '小米6' }, { src: '../../assets/images/max2.jpg', name: '小米mix' }, { src: '../../assets/images/max1.jpg', name: '小米7s' }, { src: '../../assets/images/max3.jpg', name: '小米2' }, { src: '../../assets/images/max1.jpg', name: '小米note7' }, { src: '../../assets/images/max3.jpg', name: '小米8' }] }, { txt: '電腦', id: 'computer', li: [{ src: '../../assets/images/max1.jpg', name: '小米2' }, { src: '../../assets/images/max1.jpg', name: '小米mix' }, { src: '../../assets/images/max2.jpg', name: '小米max' }, { src: '../../assets/images/max1.jpg', name: '小米6' }, { src: '../../assets/images/max3.jpg', name: '小米note' }, { src: '../../assets/images/max1.jpg', name: '小米max' }] }] }, 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數據格式寫對，按照官方文檔就行。
新聞熱點
疑難解答
