楼梯导航(data里面数据)

这边的滑动是有误差的，需要你完全掌握后进行独自修改
代码讲解

在这里插入代码片

效果图

json数据

  navList: [{c_id: "01",c_name: '电脑办公',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "02",c_name: '祛痘',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "02",c_name: '化妆品',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "03",c_name: '口红',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "04",c_name: '包包',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "05",c_name: '面膜',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "06",c_name: '精华乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "07",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "08",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "09",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "10",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "11",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "12",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "13",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "14",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "07",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "07",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]}]

代码

wxml

<view class="page"><!-- 左侧导航 --><view class='tui-fixed-left'><scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{leftMenuTop}}"><text class="menu-item {{index === currentActiveIndex ? 'menu-active' : ''}}" wx:for="{{navList}}" wx:key="unique" data-index="{{index}}" id='{{index}}' catchtap='changeMenu'>{{item.c_name}}</text></scroll-view></view><!-- 右侧滚动商品 --><view class='content'><scroll-view class='tui-city-scroll-y' scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{rightProTop}}" bindscroll="scroll"><view class='pro-item' wx:for="{{navList}}" wx:key="unique"><view class='tui-list-head' id='NAV{{index}}'>{{item.c_name}}</view><view class='tui-list-li'><view class='goods-box' wx:for-item='items' wx:for="{{item.list}}" wx:key="unique" ><image class='goodsImg' src='{{items.url}}'></image><view class='goodsName'>{{items.goodsName}}</view></view></view></view></scroll-view></view></view>

wxss

.tui-fixed-x {position: fixed;top: 0rpx;left: 0;
}.tui-fixed-left {width: 180rpx;height: 100%;border-right: 1px solid #dfdfdf;position: fixed;background-color: #f5f5f5;top: 0rpx;left: 0;
}.tui-list-head {height: 65rpx;line-height: 65rpx;
}.tui-city-scroll {width: 100%;
}.menu-item {display: block;position: relative;width: 180rpx;height: 100rpx;line-height: 100rpx;font-size: 26rpx;border-bottom: 1px solid #dfdfdf;box-sizing: border-box;background: #fff;z-index: 10;text-align: center;
}.menu-active {border-left: 10rpx solid #5196ff;background-color: #f0f0f0;
}.content {padding: 0 20rpx;position: fixed;top: 89rpx;right: 0;width: 570rpx;height: 100%;box-sizing: border-box;
}.tui-city-scroll-y {height: 100%;box-sizing: border-box;
}.tui-list-head {height: 65rpx;line-height: 65rpx;font-size: 28rpx;font-weight: 700;
}.tui-list-li {padding: 20rpx 0 0 0;background: #fff;overflow: hidden;color: #fff;font-size: 50rpx;box-sizing: border-box;
}.goods-box {margin-right: 10rpx;float: left;width: 170rpx;overflow: hidden;
}.tui-list-li .goods-box:nth-child(3n) {margin-right: 0rpx;
}.goodsImg {margin-bottom: 15rpx;display: block;width: 100rpx;height: 100rpx;margin: 0 auto;
}.goodsName {margin-bottom: 20rpx;width: 100%;height: 42rpx;line-height: 42rpx;overflow: hidden;box-sizing: border-box;text-align: center;font-size: 24rpx;text-overflow: ellipsis;white-space: nowrap;color: #333;
}

js

let proListToTop = [], menuToTop = [], MENU = 0,
windowHeight, timeoutId;
Page({data: {currentActiveIndex: 0,// 接口返回的商品数组navList: [{c_id: "01",c_name: '电脑办公',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "02",c_name: '祛痘',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "02",c_name: '化妆品',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "03",c_name: '口红',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "04",c_name: '包包',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "05",c_name: '面膜',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "06",c_name: '精华乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "07",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "08",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "09",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "10",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "11",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "12",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "13",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "14",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "07",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]},{c_id: "07",c_name: '洁面乳',list: [{id: 1,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 2,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 3,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 4,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},{id: 5,url: 'https://resource.yirenheju.cn/wechat/index/err.png',goodsName: '玩具',},]}]    },/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 确保页面数据已经刷新完毕~setTimeout(() => {this.getAllRects()}, 20)},changeMenu(e) {console.log(proListToTop);// 改变左侧tab栏操作if (Number(e.target.id) === this.data.currentActiveIndex) returnMENU = 1this.setData({currentActiveIndex: Number(e.target.id),rightProTop: proListToTop[Number(e.target.id)]})this.setMenuAnimation(Number(e.target.id))},scroll(e) {console.log(e);for (let i = 0; i < proListToTop.length; i++) {if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {return this.setDis(i)}}// 找不到匹配项，默认显示第一个数据if (!MENU) {this.setData({currentActiveIndex: 0})}MENU = 0},setDis(i) {// 设置左侧menu栏的选中状态if (i !== this.data.currentActiveIndex + 1 && !MENU) {this.setData({currentActiveIndex: i - 1})}MENU = 0this.setMenuAnimation(i)},setMenuAnimation(i) {// 设置动画，使menu滚动到指定位置。let self = thisconsole.log(33)if (menuToTop[i].animate) {console.log(11111)// 节流操作if (timeoutId) {clearTimeout(timeoutId)}timeoutId = setTimeout(() => {console.log(12138)self.setData({leftMenuTop: (menuToTop[i].top - windowHeight)})}, 50)} else {console.log(11)if (this.data.leftMenuTop === 0) returnconsole.log(22)this.setData({leftMenuTop: 0})}},getActiveReacts() {wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {return rects[0].top}).exec()},getAllRects() {// 获取商品数组的位置信息wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {rects.forEach(function (rect) {console.log(rect)//这边打印的是滚动头部的位置，去掉显示的第一个高度数字 等于你滑动显示的对应左边栏对应的位置// 这里减去44是根据你的滚动区域距离头部的高度，如果没有高度，可以将其删去proListToTop.push(rect.top - 44)})}).exec()// 获取menu数组的位置信息wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {wx.getSystemInfo({success: function (res) {console.log(res);windowHeight = res.windowHeight / 2// console.log(windowHeight)rects.forEach(function (rect) {menuToTop.push({top: rect.top,animate: rect.top > windowHeight})})}})}).exec()},// 获取系统的高度信息getSystemInfo() {let self = thiswx.getSystemInfo({success: function (res) {windowHeight = res.windowHeight / 2}})},})

楼梯导航(服务器数据1)

这边刚开始是点击没更新 因为异步与渲染没过来
去了解下nexttick机制

json数据

{"code": 10000,"msg": "成功","data": {"syPestsTypeList": [{"id": 1,"name": "农作物―禾本科"},{"id": 2,"name": "农作物―薯类"},{"id": 3,"name": "农作物―纤维类"},{"id": 4,"name": "农作物―油料"},{"id": 5,"name": "农作物―糖料"},{"id": 6,"name": "农作物―饮料作物"},{"id": 7,"name": "农作物―烟草"},{"id": 8,"name": "农作物―桑树"},{"id": 9,"name": "蔬菜―根菜类"},{"id": 10,"name": "蔬菜―薯芋类"},{"id": 11,"name": "蔬菜―葱蒜类"},{"id": 12,"name": "蔬菜―白菜类"},{"id": 13,"name": "蔬菜―甘蓝类"},{"id": 14,"name": "蔬菜―绿叶菜类"},{"id": 15,"name": "蔬菜―茄果类"},{"id": 16,"name": "蔬菜―瓜类"},{"id": 17,"name": "蔬菜―豆荚类"},{"id": 18,"name": "蔬菜―多年生菜类"},{"id": 19,"name": "蔬菜―水生菜类"},{"id": 20,"name": "蔬菜-食用菌"},{"id": 21,"name": "蓏果类作物"},{"id": 22,"name": "果树―仁果类"},{"id": 23,"name": "果树―核果类"},{"id": 24,"name": "果树―浆果类"},{"id": 25,"name": "果树―坚果类"},{"id": 26,"name": "果树―杂果类"},{"id": 27,"name": "果树―柑桔类"},{"id": 28,"name": "果树―热带及亚热带类"},{"id": 29,"name": "果树―多年生草本类"}],"syPestsCropVoList": [{"id": 11,"typeId": 1,"name": "高梁","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/11.jpg"},{"id": 10,"typeId": 1,"name": "玉米","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/10.jpg"},{"id": 9,"typeId": 1,"name": "大麦","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/9.jpg"},{"id": 8,"typeId": 1,"name": "小麦","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/8.jpg"},{"id": 7,"typeId": 1,"name": "水稻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/7.jpg"},{"id": 12,"typeId": 1,"name": "粟","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/12.jpg"},{"id": 13,"typeId": 2,"name": "甘薯","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/13.jpg"},{"id": 14,"typeId": 2,"name": "马铃薯","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/14.jpg"},{"id": 15,"typeId": 3,"name": "棉花","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/15.jpg"},{"id": 16,"typeId": 3,"name": "亚麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/16.jpg"},{"id": 17,"typeId": 3,"name": "红麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/17.jpg"},{"id": 18,"typeId": 3,"name": "黄麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/18.jpg"},{"id": 19,"typeId": 3,"name": "大麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/19.jpg"},{"id": 20,"typeId": 3,"name": "苎麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/20.jpg"},{"id": 21,"typeId": 4,"name": "大豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/21.jpg"},{"id": 22,"typeId": 4,"name": "花生","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/22.jpg"},{"id": 23,"typeId": 4,"name": "油菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/23.jpg"},{"id": 24,"typeId": 4,"name": "芝麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/24.jpg"},{"id": 25,"typeId": 4,"name": "向日葵","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/25.jpg"},{"id": 26,"typeId": 4,"name": "蓖麻","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/26.jpg"},{"id": 27,"typeId": 5,"name": "甘蔗","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/27.jpg"},{"id": 28,"typeId": 5,"name": "甜菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/28.jpg"},{"id": 29,"typeId": 6,"name": "茶树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/29.jpg"},{"id": 30,"typeId": 7,"name": "烟草","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/30.jpg"},{"id": 31,"typeId": 8,"name": "桑树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/31.jpg"},{"id": 32,"typeId": 9,"name": "萝卜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/32.jpg"},{"id": 33,"typeId": 9,"name": "胡萝卜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/33.jpg"},{"id": 34,"typeId": 9,"name": "牛蒡","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/34.jpg"},{"id": 35,"typeId": 10,"name": "魔芋","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/35.jpg"},{"id": 36,"typeId": 10,"name": "生姜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/36.jpg"},{"id": 37,"typeId": 10,"name": "芋","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/37.jpg"},{"id": 38,"typeId": 10,"name": "山药","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/38.jpg"},{"id": 39,"typeId": 10,"name": "菊芋","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/39.jpg"},{"id": 40,"typeId": 11,"name": "葱","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/40.jpg"},{"id": 41,"typeId": 11,"name": "大蒜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/41.jpg"},{"id": 42,"typeId": 11,"name": "韭菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/42.jpg"},{"id": 43,"typeId": 12,"name": "大白菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/43.jpg"},{"id": 44,"typeId": 12,"name": "青菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/44.jpg"},{"id": 45,"typeId": 12,"name": "黄心乌","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/45.jpg"},{"id": 46,"typeId": 13,"name": "甘蓝","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/46.jpg"},{"id": 47,"typeId": 13,"name": "花椰菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/47.jpg"},{"id": 48,"typeId": 13,"name": "青花菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/48.jpg"},{"id": 49,"typeId": 13,"name": "紫甘蓝","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/49.jpg"},{"id": 50,"typeId": 13,"name": "芥蓝","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/50.jpg"},{"id": 51,"typeId": 14,"name": "菠菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/51.jpg"},{"id": 52,"typeId": 14,"name": "芹菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/52.jpg"},{"id": 53,"typeId": 14,"name": "莴笋","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/53.jpg"},{"id": 54,"typeId": 14,"name": "生菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/54.jpg"},{"id": 55,"typeId": 14,"name": "苋菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/55.jpg"},{"id": 56,"typeId": 14,"name": "落葵","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/56.jpg"},{"id": 57,"typeId": 14,"name": "蕹菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/57.jpg"},{"id": 58,"typeId": 14,"name": "茴香","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/58.jpg"},{"id": 59,"typeId": 14,"name": "茼蒿","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/59.jpg"},{"id": 60,"typeId": 14,"name": "香芹","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/60.jpg"},{"id": 61,"typeId": 14,"name": "芫荽","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/61.jpg"},{"id": 62,"typeId": 14,"name": "叶芥菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/62.jpg"},{"id": 63,"typeId": 15,"name": "番茄","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/63.jpg"},{"id": 64,"typeId": 15,"name": "辣椒","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/64.jpg"},{"id": 65,"typeId": 15,"name": "茄子","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/65.jpg"},{"id": 66,"typeId": 16,"name": "黄瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/66.jpg"},{"id": 67,"typeId": 16,"name": "西葫芦","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/67.jpg"},{"id": 68,"typeId": 16,"name": "冬瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/68.jpg"},{"id": 69,"typeId": 16,"name": "瓠瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/69.jpg"},{"id": 70,"typeId": 16,"name": "丝瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/70.jpg"},{"id": 71,"typeId": 16,"name": "南瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/71.jpg"},{"id": 72,"typeId": 16,"name": "飞碟瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/72.jpg"},{"id": 73,"typeId": 16,"name": "佛手瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/73.jpg"},{"id": 74,"typeId": 16,"name": "苦瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/74.jpg"},{"id": 75,"typeId": 17,"name": "菜豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/75.jpg"},{"id": 76,"typeId": 17,"name": "豇豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/76.jpg"},{"id": 77,"typeId": 17,"name": "毛豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/77.jpg"},{"id": 78,"typeId": 17,"name": "豌豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/78.jpg"},{"id": 79,"typeId": 17,"name": "扁豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/79.jpg"},{"id": 80,"typeId": 17,"name": "蚕豆","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/80.jpg"},{"id": 81,"typeId": 18,"name": "黄花菜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/81.jpg"},{"id": 82,"typeId": 18,"name": "枸杞","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/82.jpg"},{"id": 83,"typeId": 18,"name": "芦笋","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/83.jpg"},{"id": 84,"typeId": 19,"name": "莲藕","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/84.jpg"},{"id": 85,"typeId": 19,"name": "茭白","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/85.jpg"},{"id": 86,"typeId": 19,"name": "慈姑","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/86.jpg"},{"id": 87,"typeId": 19,"name": "荸荠","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/87.jpg"},{"id": 88,"typeId": 20,"name": "蘑菇","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/88.jpg"},{"id": 89,"typeId": 20,"name": "香菇","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/89.jpg"},{"id": 90,"typeId": 20,"name": "平菇","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/90.jpg"},{"id": 91,"typeId": 20,"name": "鸡腿菇","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/91.jpg"},{"id": 92,"typeId": 20,"name": "杏鲍菇","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/92.jpg"},{"id": 93,"typeId": 20,"name": "竞争性杂菌","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/93.jpg"},{"id": 94,"typeId": 21,"name": "西瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/94.jpg"},{"id": 95,"typeId": 21,"name": "甜瓜","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/95.jpg"},{"id": 96,"typeId": 22,"name": "苹果","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/96.jpg"},{"id": 97,"typeId": 22,"name": "梨树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/97.jpg"},{"id": 98,"typeId": 22,"name": "山楂","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/98.jpg"},{"id": 99,"typeId": 23,"name": "桃树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/99.jpg"},{"id": 100,"typeId": 23,"name": "李树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/100.jpg"},{"id": 101,"typeId": 23,"name": "杏树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/101.jpg"},{"id": 102,"typeId": 23,"name": "樱桃","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/102.jpg"},{"id": 103,"typeId": 23,"name": "梅树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/103.jpg"},{"id": 104,"typeId": 24,"name": "葡萄","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/104.jpg"},{"id": 105,"typeId": 24,"name": "猕猴桃","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/105.jpg"},{"id": 106,"typeId": 25,"name": "板栗","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/106.jpg"},{"id": 107,"typeId": 25,"name": "核桃","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/107.jpg"},{"id": 108,"typeId": 26,"name": "枣树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/108.jpg"},{"id": 109,"typeId": 26,"name": "柿树","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/109.jpg"},{"id": 110,"typeId": 26,"name": "石榴","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/110.jpg"},{"id": 111,"typeId": 27,"name": "柑橘","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/111.jpg"},{"id": 112,"typeId": 28,"name": "荔枝","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/112.jpg"},{"id": 113,"typeId": 28,"name": "龙眼","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/113.jpg"},{"id": 114,"typeId": 28,"name": "芒果","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/114.jpg"},{"id": 115,"typeId": 28,"name": "枇杷","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/115.jpg"},{"id": 116,"typeId": 29,"name": "香蕉","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/116.jpg"},{"id": 117,"typeId": 29,"name": "草莓","pic": "https://www.sndn.cloud/attachment/sy_pests_img/head/img/117.jpg"}]}
}

把后端数据变成你想要的的格式

这边是根据id 与 typeid来进行规划的
因为这边是数据是分开的所以先
1 把数据合并一起
2 然后进行循环嵌套

 onLoad: function (options) {// 确保页面数据已经刷新完毕~var that = thiswx.showLoading({title: '加载中',icon: 'loading',duration: 10000});util.sendRrquest('/sy/pests/getTableList', 'POST', 'data', header).then(function (res) {wx.hideLoading()var sonlist1=[...res.data.data.syPestsTypeList,...res.data.data.syPestsCropVoList]for (let index = 0; index < sonlist1.length; index++) {if(!sonlist1[index].typeId){var arr=[]for (let i = 0; i < sonlist1.length; i++) {if(sonlist1[index].id===sonlist1[i].typeId){arr.push(sonlist1[i])}}console.log(111,arr)sonlist1[index].arr=arr}      }console.log(sonlist1)console.log()that.setData({navList: sonlist1,})}, function (error) {console.log(error);})},

代码

wxml <view class="page"><!-- 左侧导航 --><view class='tui-fixed-left'><scroll-view class='tui-city-scroll'  scroll-y="true" style='height:92%;'scroll-with-animation="true" scroll-top="{{leftMenuTop}}"><view  wx:if="{{!item.typeId}}" class="menu-item {{index === currentActiveIndex ? 'menu-active' : ''}}"wx:for="{{navList}}" wx:key="item.id" data-index="{{index}}" id='{{index}}'><view  catchtap='changeMenu' data-index="{{index}}" id='{{index}}'  class="{{index === currentActiveIndex ? 'leftmenu' : ''}}">{{item.name}}</view></view></scroll-view></view><!-- 右侧滚动商品 --><view class='content'><scroll-view class='tui-city-scroll-y' scroll-y="true" style='height:92%;' scroll-with-animation="true"scroll-top="{{rightProTop}}" bindscroll="scroll"  ><view class='pro-item'    wx:for="{{navList}}" wx:key="item.typeId"><view  wx:if="{{!item.typeId}}" class='tui-list-head' id='NAV{{index}}'>{{item.name}}</view><view  wx:if="{{!item.typeId}}" class='tui-list-li'><view bindtap="btnget" data-num="{{0}}" data-id="{{items.id}}" data-name="{{items.name}}" data-pic="{{items.pic}}"  class='goods-box'  wx:for-item='items'   wx:for="{{item.arr}}"><image class='goodsImg' src='{{items.pic}}'></image><view class='goodsName'>{{items.name}}</view></view></view></view></scroll-view></view>
</view>wxss
.tui-fixed-x {position: fixed;top: 0rpx;left: 0;
}.tui-fixed-left {width: 180rpx;height: 100%;border-right: 1px solid #dfdfdf;position: fixed;background-color: #f5f5f5;top: 0rpx;left: 0;
}.tui-list-head {text-align: center;height: 65rpx;line-height: 65rpx;
}
.tui-list-head::before{content: '---';margin-right: 5px;
}
.tui-list-head::after{content: '---';margin-left: 5px;
}
.tui-city-scroll {width: 100%;
}.menu-item {display: block;position: relative;width: 180rpx;height: 100rpx;padding: 4px 0;line-height: 100rpx;font-size: 26rpx;border-bottom: 1px solid #dfdfdf;box-sizing: border-box;background-color: #f0f0f0;z-index: 10;text-align: center;
}.menu-active {background: #fff;
}.content {padding: 0 20rpx;position: fixed;top: 89rpx;right: 0;width: 570rpx;height: 100%;box-sizing: border-box;
}.tui-city-scroll-y {height: 100%;box-sizing: border-box;
}.tui-list-head {height: 65rpx;line-height: 65rpx;font-size: 28rpx;font-weight: 700;
}.tui-list-li {padding: 20rpx 0 0 0;background: #fff;overflow: hidden;color: #fff;font-size: 50rpx;box-sizing: border-box;
}.goods-box {margin-right: 10rpx;float: left;width: 170rpx;overflow: hidden;
}.tui-list-li .goods-box:nth-child(3n) {margin-right: 0rpx;
}.goodsImg {border-radius: 50%;margin-bottom: 15rpx;display: block;width: 100rpx;height: 100rpx;margin: 0 auto;
}.goodsName {margin-bottom: 20rpx;width: 100%;height: 42rpx;line-height: 42rpx;overflow: hidden;box-sizing: border-box;text-align: center;font-size: 24rpx;text-overflow: ellipsis;white-space: nowrap;color: #333;
}
.leftmenu{width: 180rpx;margin-top: 10px;height: 60rpx !important;line-height: 60rpx !important;border-left: 10rpx solid #5196ff;background: #fff;vertical-align: middle;
}jsvar util = require('../../../utils/server'),header = util.reqHeader()
let proListToTop = [],menuToTop = [],MENU = 0,windowHeight, timeoutId;
Page({data: {currentActiveIndex: 0,// 接口返回的商品数组list1: [],// navList:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 确保页面数据已经刷新完毕~var that = thiswx.showLoading({title: '加载中',icon: 'loading',duration: 10000});util.sendRrquest('/sy/pests/getTableList', 'POST', 'data', header).then(function (res) {wx.hideLoading()var sonlist1=[...res.data.data.syPestsTypeList,...res.data.data.syPestsCropVoList]for (let index = 0; index < sonlist1.length; index++) {if(!sonlist1[index].typeId){var arr=[]for (let i = 0; i < sonlist1.length; i++) {if(sonlist1[index].id===sonlist1[i].typeId){arr.push(sonlist1[i])}}console.log(111,arr)sonlist1[index].arr=arr}      }console.log(sonlist1)console.log()that.setData({navList: sonlist1,})wx.nextTick(that.getAllRects)}, function (error) {console.log(error);})},changeMenu(e) {if (Number(e.target.id) === this.data.currentActiveIndex) returnMENU = 1console.log(proListToTop[Number(e.target.id)]);this.setData({currentActiveIndex: Number(e.target.id),rightProTop: proListToTop[Number(e.target.id)]})this.setMenuAnimation(Number(e.target.id))},scroll(e) {console.log(e);for (let i = 0; i < proListToTop.length; i++) {if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {return this.setDis(i)}}// 找不到匹配项,默认显示第一个数据if (!MENU) {this.setData({currentActiveIndex: 0})}MENU = 0},setDis(i) {var that=this;// 设置左侧menu栏的选中状态if (i !== this.data.currentActiveIndex + 1 && !MENU) {this.setData({currentActiveIndex: i - 1})}MENU = 0that.setMenuAnimation(i)},setMenuAnimation(i) {let that = thisif (menuToTop[i].animate) {console.log(animate)console.log(11111)// 节流操作if (timeoutId) {clearTimeout(timeoutId)}timeoutId = setTimeout(() => {console.log(12138)that.setData({leftMenuTop: (menuToTop[i].top - windowHeight)})}, 50)} else {// console.log(11)if (this.data.leftMenuTop === 0) return// console.log(22)this.setData({leftMenuTop: 0})}},btnget(e){console.log(e)var  encyclopedianame=e.currentTarget.dataset.namevar  encyclopediapic=e.currentTarget.dataset.picvar  encyclopediaid=e.currentTarget.dataset.idvar  encyclopedianim=e.currentTarget.dataset.numwx.navigateTo({url: '/packageC/pages/encyclopedia/encyclopedia?encyclopedianame='+encyclopedianame+'&encyclopediapic='+encyclopediapic+'&encyclopediaid='+encyclopediaid+'&encyclopedianim='+encyclopedianim})        },getActiveReacts() {wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {return rects[0].top}).exec()},getAllRects() {// 获取商品数组的位置信息wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {rects.forEach(function (rect) {// console.log(rect)// 这里减去44是根据你的滚动区域距离头部的高度,如果没有高度,可以将其删去proListToTop.push(rect.top - 49)})}).exec()// 获取menu数组的位置信息wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {wx.getSystemInfo({success: function (res) {console.log(res);windowHeight = res.windowHeight / 2console.log(windowHeight)rects.forEach(function (rect) {menuToTop.push({top: rect.top,animate: rect.top > windowHeight})})}})}).exec()},// 获取系统的高度信息getSystemInfo() {let that = thiswx.getSystemInfo({success: function (res) {windowHeight = res.windowHeight / 2}})},})

楼梯导航服务器数据2

json数据

{"code": 10000,"msg": "成功","data": {"type": [{"id": 1,"attr": 0,"name": "水果","fid": null},{"id": 2,"attr": 0,"name": "绿茶","fid": 1},{"id": 3,"attr": 0,"name": "香蕉","fid": 1},{"id": 4,"attr": 0,"name": "苹果","fid": 1},{"id": 5,"attr": 0,"name": "柑橘","fid": 1},{"id": 6,"attr": 0,"name": "梅子","fid": 1},{"id": 8,"attr": 0,"name": "桃类","fid": 1},{"id": 11,"attr": 0,"name": "杏","fid": 1},{"id": 10,"attr": 0,"name": "李子","fid": 1}],"standard": [{"attr": 0,"name": "有机"},{"attr": 0,"name": "绿色"},{"attr": 0,"name": "无公害"},{"attr": 0,"name": "普通"}]}
}

代码

把数据变成你想要的格式

  // 下面是处理数据你需要的for (let index = 0; index < arr.length; index++) {if(arr[index].fid==null){var arrs=[]for (let i = index+1; i < arr.length; i++) {if(arr[i].fid==null){break;}else{arrs.push(arr[i])}}console.log(111,arrs)arr[index].fid=arrs}  console.log(arrs)that.setData({navlist:arr,//arr是你处理过得到的数据navson:arrs//这边是子级的数据})

参考https://blog.csdn.
net/weixin_38168547/article/details/101887997?utm_medium=distribute.pc_relevant.none-task-blog-
baidujs_title-1&spm=1001.2101.3001.4242

WeChat楼梯导航相关推荐

1. 常用插件的封装（轮播图、选项卡、楼梯导航及、拖拽）

   PC端轮播图 1. 第一种轮播图(自动慢慢滑动,多用于展示) HTML部分: <div id="box"> <ul id="banner"&g ...

2. 微信小程序【楼梯导航】

   楼梯导航Scroll-view 写一个例子: css样式 js代码

3. 原生JS实现 购物车制作 和 楼梯导航（11）

   购物车 1. 全选按钮  1.1 将所有的单选按钮和全选按钮保持一致, 并且所有的全选按钮也保持一致   1.2 将总件数变成单选按钮的个数  1.3 计算总计 2. 单选按钮功能:   2.1 判断 ...

4. 楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航

   jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...

5. JavaScript编程语言 基础 （1）

   问题:什么是web前端 前端:指界面,计算机(PC)软件桌面的界面: 计算机端的浏览器界面: 移动端的软件(app)界面: 移动端的浏览器界面. Html+css+JavaScript 使用网页技术( ...

6. 前端剑法第一式———砺锋

   前端学习之旅漫长悠远,犹如千日磨剑一朝起,寒光乍现惊九州,故而需耐下性子苦学基础,多学多记多练,方可成功. 目录 常用标签  (h1 , p , hgroup , em与strong , q , br ...

7. 常用H5标签-第三部分

   目录 一.超链接 1.功能: 2.属性: 3.锚点功能 二.图片标签 三.图片格式 四.音视频 一.超链接 超链接是行内元素,它里面可以放任何元素,除了它自己 可以是一个字,一段文字,图片,表格等 1 ...

8. 网页设计作业`京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载

   HTML5期末大作业:京东网站设计--仿京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 文章目录 HTML5期末大作业:京东网站 ...

9. HTML教程|菜鸟教程（2）

   01结构标签 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...

最新文章

1. C#函数式编程之可选值
2. 企业移动办公及手机办公方案
3. Vue.js 整理笔记
4. python测试运行快捷键_Python基于unittest实现测试用例执行
5. springboot 多个sevice类实现同一接口的调用
6. 【转】提高PHP性能的53个技巧
7. c语言 手机图形库,c语言的图形库 - osc_opiar5rp的个人空间 - OSCHINA - 中文开源技术交流社区...
8. linux 磁盘监控,9个在Linux中监视Linux磁盘分区和用法的工具
9. js判断移动端或是pc端
10. python执行js之pyexecjs
11. MPP集群基本概念和搭建
12. Android HIDL 介绍学习之客户端调用
13. maven学习记录：maven专栏简介
14. linux mate主题目录,七大顶级Linux桌面：Cinnamon和MATE_服务器_服务器产业-中关村在线...
15. 【北交所周报】继北证50指数后，北交所推出融资融券交易细则；新股慧为智能上市当日收涨22.13%，远航精密上市即破发；...
16. c++ fgets() 用法
17. 学习笔记：Java虚拟机——JVM内存结构、垃圾回收、类加载与字节码技术
18. 将html字符串格式化成自己想要的格式
19. x86_64平台SingleStep单步调试原理和示例
20. 临床路径管理系统有那些主要功能

热门文章

1. Python 绘制圆柱体(3D图)
2. Python+Selenium自动化测试——126邮箱自动登录脚本(登录首页是二维码，切入账号密码输入框)
3. g2plot 水滴图，包含数据更新时渲染问题
4. house robbers
5. VS2017解决方案整理解决（一）
6. Android变录音边转换为mp3格式的声音---libmp3lame库的使用
7. js 三个点（...），扩展运算符说明
8. Node.js 更新到最新版本
9. PHP保存微信头像到本地
10. Dubbo封装异常处理Filter报AppResponse represents an concrete business response解决方案