微信小程序 左右联动菜单
根据左侧列表，联动跳右侧内容。
效果如图：
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:;}
.tui-fixed-left{width: 180rpx;height: 100%;border-right: 1px solid #dfdfdf;
position: fixed;background-color:#f5f5f5;top: 0rpx;left:;}
.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:;text-align: center;}
.menu-active{border-left:10rpx solid #5196ff;background-color:#f0f0f0;}
.content{padding:0 20rpx;position: fixed;top: 89rpx;right:;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:;}
.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: {
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 (options) {
// 确保页面数据已经刷新完毕~
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
}
})
}, })
微信小程序 左右联动菜单的更多相关文章
- 微信小程序左右联动菜单（即可左联动，也可右联动）
<!-- 搜索 --> <view class="search"> <input class="search-box" place ...
- 微信小程序-多级联动
微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...
- 微信小程序省市联动
最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清 ...
- 微信小程序省市区联动，自定义地区字典
最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils ...
- 微信小程序 - 下拉菜单组件
使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端 点击下载:小程序-下拉组件.
- 微信小程序之----底部菜单action-sheet
action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是 ...
- 微信小程序组件 分页菜单点击请求
//JS data: { navNum:0, navList: [ { id: 1, name: '已预约' }, { id: 2, name: '已消费' }, { id: 3, name: '已取 ...
- 微信小程序制作下来菜单
wxml: <view class="phone_one" bindtap="clickPerson"> <view class=" ...
- 微信小程序 -- 自定义抽屉式菜单（底部，从下向上拉出）
实现一个抽屉菜单的案例 wxml <!--button--> <view class="btn" bindtap="powerDrawer" ...
随机推荐
- linux 确定端口使用情况
lsof -i:3533 确定端口已经在使用
- 2019牛客多校第五场 generator 1——广义斐波那契循环节&&矩阵快速幂
理论部分 二次剩余 在数论中,整数 $X$ 对整数 $p$ 的二次剩余是指 $X^2$ 除以 $p$ 的余数. 当存在某个 $X$,使得式子 $X^2 \equiv d(mod \ p)$ 成立时,称 ...
- zhengrui集训笔记2
Day_6 计算几何 点积\Large 点积点积 叉积\Large 叉积叉积 极角\Large 极角极角 < π\piπ :叉积判断 else :atan2 旋转\Large 旋转旋转 左乘第一 ...
- docker起容器配置MySQL主从复制
https://www.jianshu.com/p/0439206e1f28
- Java+自动扫描文件夹+发送+上传
1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...
- 【概率论】4-1:随机变量的期望(The Expectation of a Random Variable Part II)
title: [概率论]4-1:随机变量的期望(The Expectation of a Random Variable Part II) categories: - Mathematic - Pro ...
- php安装扩展的地址
1 查看扩展 phpinfo or extention_loads or php -m 下载扩展地址 http://pecl.php.net or http://windows.php.n ...
- 全局变量异步I/O
/*** sync_process.c ***/ #include <stdio.h> #include <signal.h> #include <unistd.h> ...
- static关键字的用法小结
static:是一个修饰符,用于修饰成员(成员变量,成员函数). 当成员被静态修饰后,就多了一个调用方式,除了可以被对象调用外,还可以直接被类名调用,写法:类名.静态成员 static特点: 1.随着 ...
- oracle查询历史执行语句
SELECT * FROM v$sqlarea WHERE PARSING_SCHEMA_NAME='GAVIN' and SQL_TEXT LIKE '%delete%' ORDER BY LAST ...