微信小程序左右联动菜单（即可左联动，也可右联动）

<!-- 搜索 -->

<view class="search">

<input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input>

<image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image>

</view>

<!-- 左侧导航 -->

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

.wxss

page{

font-family: "微软雅黑";

background-color:#f0f0f0;

}

.search{

width:100%;

height:88rpx;

background-color:# 5196ff;

box-sizing: border-box;

padding-top:18rpx;

position: fixed;

left: 0;

top: 0;

}

.search-box{

width:690rpx;

height:57rpx;

margin-left:30rpx;

background-color:#fff;

box-sizing: border-box;

padding-left: 60rpx;

border-radius: 57rpx;

font-size: 26rpx;

}

.question-mark{

width:30rpx;

height:30rpx;

position: absolute;

left:45rpx;

top:30rpx;

}

.tui-fixed-x{

/* margin-left: 130px; */

position: fixed;

top: 89rpx;

left: 0;

}

.tui-fixed-left{

width: 180rpx;

height: 100%;

border-right: 1px solid #dfdfdf;

position: fixed;

background-color:#f5f5f5 ;

top: 89rpx;

left: 0;

}

.tui-list-head{

height:65rpx;

line-height: 65rpx;

}

.tui-city-scroll{

width: 100%;

}

.menu-item{

font-size: 26rpx;

box-sizing: border-box;

height: 100rpx;

line-height: 100rpx;

width: 180rpx;

background-color:#fff ;

display: block;

border-bottom: 1px solid #dfdfdf;

position: relative;

z-index: 10;

text-align: center;

}

.menu-active{

border-left:10rpx solid #5196ff;

background-color:#f0f0f0 ;

}

.content{

width:570rpx;

box-sizing: border-box;

padding-left: 20rpx;

padding-right: 20rpx;

height: 100%;

position: fixed;

top: 89rpx;

right: 0;

}

.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{

background-color:#fff ;

/* height: 400px; */

overflow: hidden;

color: #fff;

font-size: 50rpx;

box-sizing: border-box;

padding:20rpx 0 0 0;

}

.goods-box{

width:170rpx;

/* height: 100rpx;

background: #c00; */

overflow: hidden;

margin-right:10rpx;

/* margin-bottom: 10rpx; */

float:left;

}

.tui-list-li .goods-box:nth-child(3n){

margin-right:0rpx;

}

.goodsImg{

display: block;

width:100rpx;

height: 100rpx;

margin:0 auto;

margin-bottom: 15rpx;

}

.goodsName{

width:100%;

overflow: hidden;

box-sizing: border-box;

height: 42rpx;

line-height: 42rpx;

text-align: center;

font-size: 24rpx;

text-overflow: ellipsis;

white-space: nowrap;

color: #333;

margin-bottom: 20rpx;

}

 

.js

var app = getApp();

//声明全局变量

let proListToTop = [], menuToTop = [], MENU = 0, windowHeight, timeoutId;

// MENU ==> 是否为点击左侧进行滚动的，如果是，则不需要再次设置左侧的激活状态

Page({

data: {

staticImg: app.globalData.staticImg,

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 (e) {

// 确保页面数据已经刷新完毕~

setTimeout(() => {

this.getAllRects()

}, 20)

},

 

changeMenu(e) {

console.log(proListToTop);

// 改变左侧tab栏操作

if (Number(e.target.id) === this.data.currentActiveIndex) return

MENU = 1

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) {

// 设置左侧menu栏的选中状态

if (i !== this.data.currentActiveIndex + 1 && !MENU) {

this.setData({

currentActiveIndex: i - 1

})

}

MENU = 0

this.setMenuAnimation(i)

},

setMenuAnimation(i) {

// 设置动画，使menu滚动到指定位置。

let self = this

console.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) return

console.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 = this

wx.getSystemInfo({

success: function (res) {

windowHeight = res.windowHeight / 2

}

})

}

 

})

 

转载于:https://www.cnblogs.com/xinheng/p/9544398.html