微信小程序左右联动菜单（即可左联动，也可右联动）
<!-- 搜索 -->
<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' ...
随机推荐
- Linux安装和配置java
安装文件:jdk-6u45-linux-x64.bin 1.root用户在/usr/local目录下建立java目录 2.拷贝jdk-6u45-linux-x64.bin到/usr/local/jav ...
- MYSQL5.6二进制包的安装
二进制1. 下载包 wget http://mirrors.sohu.com/mysql/MySQL-5.6/mysql-5.6.26-linux-glibc2.5-x86_64.tar.gz2. 解 ...
- fixture详细介绍-作为参数传入,error和failed区别
前言 fixture是pytest的核心功能,也是亮点功能,熟练掌握fixture的使用方法,pytest用起来才会得心应手! fixture简介 fixture的目的是提供一个固定基线,在该基线上测 ...
- SSH整合项目----在线商城
1.1 网上商城需求分析 1.1.1 前台:用户模块. 注册: * JS非空校验.(不是必须) * Struts2数据校验:在注册Action类同一包下新建UserAction-user_reg ...
- gin框架教程一: go框架gin的基本使用
我们在用http的时候一般都会用一些web框架来进行开发,gin就是这样的一个框架,它有哪些特点呢 一:gin特点 1.性能优秀2.基于官方的net/http的有限封装3.方便 灵活的中间件4.数据绑 ...
- AGC035 A - XOR Circle【分析】
题目传送门 题意简述: (就是连环的意思) 唔,这道题考场上写了个什么神仙做法,数据太水了居然过了: // #include<cstdio> #include<algorithm&g ...
- Vue --》this.$set()的神奇用法
作为一名开发者,我们都知道: data中数据,都是响应式.也就是说,如果操作data中的数据,视图会实时更新: 但在实际开发中,遇到过一个坑:若data中数据类型为对象,方法methods中改变对象的 ...
- 小记---------关于linux 定时任务crontab
linux的crontab定时任务 启动服务: service crond start 关闭服务: service crond stop 重启服务: service crond ...
- idea工具
1. 使用IntelliJ IDEA 配置JDK(入门) https://blog.csdn.net/nobb111/article/details/77116259 2. idea 调试快捷键 ...
- IIS服务搭建 试图加载格式不正确的程序
1.基础步骤 https://jingyan.baidu.com/article/fedf073770f23335ac8977b1.html 2.错误解决 试图加载格式不正确的程序 解决:在IIS ...