微信小程序左右联动菜单（即可左联动，也可右联动）
<!-- 搜索 -->
<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
}
})
}
})
微信小程序左右联动菜单（即可左联动，也可右联动）的更多相关文章
- 微信小程序独家秘笈之左滑删除
代码地址如下:http://www.demodashi.com/demo/14056.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序 - 下拉菜单组件
使用: 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" ...
- 微信小程序之双重循环(包含左滑删除，以及数据各项处理)
<view wx:for="{{hommer}}" wx:for-item="item" wx:for-index="index" w ...
- 伤不起的微信小程序
前段时间不是很忙,刚好公司需要开发一个微信小程序,于是我就入坑了(此坑还是有点深滴,请备好干粮). 我是一名iOS开发工程师,个人觉得入门开发小程序的话,需要基本的web前端知识,比如说:代码的书写格 ...
- 干货，看微信小程序后台用户数据如何演变和递增
这几天发现附近小程序又多了好几家,其中有普通小程序和门店小程序,把它们做一个对比,门店小程序更多的像一张名片,只有基本的企业名称.地址.营业时间.电话和门店照片,和普通小程序相比显得逊色许多.楼下的水 ...
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
随机推荐
- Python_基础知识储备
目录 目录 前言 初识Python 解析型与编译型 OOP与POP 相关概念1 Python的解释器 Python程序设计的思想 Python的编程风格 最后 前言 前面的博文从记录了如何Setup ...
- frei0r-20190715-118a589 编译 frei0r 时注意事项
如果滤镜是 CPP 编写,需要选择 gcc Thread model: win32 模式,如果选择 posix 模式时,提示错误: 无法找到 dll 文件: frei0r-1.6.1-dlls-201 ...
- Python的22个编程技巧，请收下！
1. 原地交换两个数字 Python 提供了一个直观的在一行代码中赋值与交换(变量值)的方法,请参见下面的示例: x,y= 10,20 print(x,y) x,y= y,x print(x,y) # ...
- ffi模块——node调用动态链接库(.so/.dll文件)
参考资料1:[https://www.npmjs.com/package/ffi] 参考资料2:[http://imweb.io/topic/57732fbef0a5487b05f325bf] 参考资 ...
- cocos2dx[3.2](4) 入口类AppDelegate
这是游戏程序的入口,主要用于游戏程序的逻辑初始化,并创建运行程序的入口界面(即第一个游戏界面场景). 里面有三个方法: // applicationDidFinishLaunching(); //逻辑 ...
- P3367 【模板】并查集
喵呜~~(题面) 这题其实很早就过了,但是呢,以前过的时候真的基本上是CtrlC+CtrlV,这次把代码重新码了一遍,对并查集也有了一个基本清晰的认识 #include<iostream> ...
- 将Lambda表达式作为参数传递并解析-在构造函数参数列表中使用Lambda表达式
public class DemoClass { /// <summary> /// 通过Lambda表达式,在构造函数中赋初始值 /// </summary> /// < ...
- Virtual DOM和snabbdom.js
Virtual DOM和snabbdom.js:https://www.jianshu.com/p/1f1ef915e83e
- java 不可变对象 final Collections guava 简单样例
本地环境 jdk1.8 连接 Google Guava官方教程(中文版) journaldev 说明 java的final关键字大家都了解,但是final修饰的如果是引用类型,那么不可修改的其实只是重 ...
- java 工具类使用
BigDecimalUtil 金额计算工具类 import java.math.BigDecimal; public class BigDecimalUtil { private BigDecimal ...