小程序实现左右菜单联动（-）

效果

test.wxml 的文件

  <view class="detail"><view class="content"><view class="menu-container"><scroll-view scroll-y="true" class="scroll-view" scroll-into-view="head-{{indexSize}}"><view class="scroll-view-ul">   <block wx:for="{{detail}}" wx:for-item="item" wx:key="index" id="head-{{index}}"><view class="scroll-view-item {{indexSize === index?'active':''}}"   bindtap="scrollTo" data-index="{{index}}">{{item.title}}</view></block></view></scroll-view></view><swiper indicator-dots='true' class="detail-container" bindchange="change" data-index="{{index}}" current="{{indexSize}}"indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" duration="{{duration}}"><swiper-item wx:for="{{detail}}" wx:for-item="item" wx:key="index"><scroll-view scroll-y="true" class=" market-scroll-list"><view class="title">{{detail[indexSize].title}} </view><a wx:for="{{detail[indexSize].list}}" wx:key="index" wx:key="index" item="item"key="key"><view class="inner"><view class="cover"><view class="cover-img"></view> </view><view class="info overflow"><view class="info-title overflow">{{item.title}}</view><view class="info-subtitle overflow">{{item.subtitle}}</view><view class="info-desc overflow">{{item.title}}</view></view><view class="num"><text class="text">数量：999</text></view></view></a></scroll-view></swiper-item></swiper></view></view>

test.wxss

.overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}.content {
display: flex;
width: 100%;
position: absolute;
bottom: 0rpx;
left: 0;
top: 0;
overflow: hidden;
}
.menu-container {
width: 160rpx;
flex: 0 0 160rpx;
background: #f6f6f6;
}
.detail-container {
flex: 1;
height: 100%;
}.scroll-view {
width: 100%;
height: 100%;
}
.scroll-view-ul {
width: 100%;
height: 100%;
}
.scroll-view-item {
height: 110rpx;
width: 100%;
font-size: 24rpx;
color: #666;
border-left: 8rpx solid transparent;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.scroll-view-item:after {
content: '';
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #dfdfdf;
transform: scaleY(0.5);
position: absolute;
}
.active {
background: #ffffff;
color: #fe3e62;
border-left: 8rpx solid #fe3e62;
}.market-scroll-list {
height: 100%;
}
.title {
height: 55rpx;
background-color: #f6f6f6;
border-left: 6rpx solid #dfdfdf;
padding-left: 25rpx;
line-height: 55rpx;
}
.inner {
display: flex;
padding: 30rpx;
position: relative;
}
.inner:after {content: '';left: 30rpx;right: 0;bottom: 0;height: 1px;background-color: #dfdfdf;transform: scaleY(0.5);position: absolute;
}
.cover {width: 100rpx;height: 100rpx;border: 1px solid #dfdfdf;background: #f6f6f6;padding: 20rpx;}.cover-img {width: 100%;height: 100%;background-color: red;}
.info {flex: 1;padding: 0 30rpx;font-size: 0;
}.info-title {color: #333;font-size: 26rpx;}.info-subtitle {color: #999999;font-size: 20rpx;margin-top: -3rpx;}.info-desc {color: #666666;font-size: 22rpx;margin-top: 5rpx;}
.num {width: 120rpx;position: relative;
}.text {position: absolute;bottom: 0;font-size: 22rpx;color: #666;}

test.js

// pages/test/test.js
Page({/*** 页面的初始数据*/data : {indexSize: 0,indicatorDots: false,autoplay: false,duration: 0, //可以控制动画list: '',detail: [{id: 1,title: '宴会舞台区',list: [{title: '舞台truss架子',subtitle: '坚固安全 质地优质',},{title: '背景架',subtitle: '专业调配 质量保证',},{title: '浪漫星空',subtitle: '营造温馨浪漫感',},{title: '欧式吊幔',subtitle: '低调奢华 高端品质',},{title: '桁架',subtitle: '背景支架 坚实牢固',},{title: '精美珠光地毯',subtitle: '珠光闪耀 高端时尚',},{title: '梦幻水晶灯',subtitle: '奢华璀璨 高贵典雅',},{title: '华丽玫瑰花',subtitle: '精致浪漫 时尚优雅',},{title: '精美藤蔓',subtitle: '线条优美 浪漫情调',},{title: '主题背景板',subtitle: '高贵圣洁 华丽梦幻',},{title: '梦幻软光灯带',subtitle: '光芒璀璨 增添氛围',},{title: '欧式雕花柱',subtitle: '雕刻精细 增添立体感',},{title: '梦幻天使',subtitle: '人间精灵 守护爱情',},{title: '梦幻蜡烛',subtitle: '温馨烛光 灵动火苗',},{title: '欧式罗马花盆',subtitle: '精致浪漫 时尚优雅',},{title: '欧式罗马柱',subtitle: '尽显欧式奢华与典雅',},{title: '欧式唯美花艺',subtitle: '梦幻色调 唯美大气',},],},{id: 2,title: 'T台过道区',list: [{title: '幸福之路',subtitle: '唯美浪漫 时尚大气',},{title: '台阶装置',subtitle: '唯美浪漫 时尚大气',},{title: '时尚小舞台',subtitle: '精致浪漫 凸显主题',},{title: '精美珠光地毯',subtitle: '珠光闪耀 高端大气',},{title: '梦幻水晶灯',subtitle: '奢华璀璨 高贵典雅',},{title: '欧式罗马柱',subtitle: '尽显欧式奢华与典雅',},{title: '欧式罗马花盆',subtitle: '高雅奢华 彰显品味',},{title: '梦幻蜡烛',subtitle: '温馨烛光 灵动火苗',},{title: '梦幻天使',subtitle: '人间精灵 守护爱情',},{title: '欧式唯美花艺',subtitle: '梦幻色调 唯美大气',},{title: '欧式浪漫花球',subtitle: '色彩搭配 增添氛围',},],},{id: 3,title: '宴会餐桌区',list: [{title: '主题桌布',subtitle: '高贵色调 舒适柔软',},{title: '欧式吊幔桌围',subtitle: '低调奢华 高端品质',},{title: '欧式竹节椅',subtitle: '奢华享受 高贵低调',},{title: '欧式椅背纱',subtitle: '唯美梦幻 轻盈飘逸',},{title: '欧式主桌花',subtitle: '唯美大气 高贵华丽',},{title: '梦幻蜡烛',subtitle: '温馨时尚 精致梦幻',},{title: '欧式罗马柱',subtitle: '尽显欧式奢华与典雅',},{title: '金色欧式烛台',subtitle: '高贵奢华 彰显品味',},{title: '欧式客桌花',subtitle: '优雅别致 精美独特',},{title: '欧式珠链',subtitle: '高雅奢华 彰显品味',},{title: '精美椅背蝴蝶结',subtitle: '小巧精致 凸显主题',},{title: '浪漫花瓣',subtitle: '营造气氛 增加层次',},{title: '主题桌卡',subtitle: '主题风格 精美细节',},{title: '主题席卡',subtitle: '主题风格 精美细节',},],},{id: 4,title: '迎宾合影区',list: [{title: '背景架',subtitle: '专业调配 质量保证',},{title: '主题布幔',subtitle: '丝质柔软 色彩鲜艳',},{title: '欧式吊幔',subtitle: '低调奢华 高端品质',},{title: '主题背景板',subtitle: '高贵圣洁 华丽梦幻',},{title: '欧式雕花栅栏',subtitle: '雕刻精美 增添氛围',},{title: '时尚小舞台',subtitle: '精致浪漫 凸显主题',},{title: '精美地毯',subtitle: '高贵色调 舒适柔软',},{title: '浪漫白鸽',subtitle: '灵动活泼 寓意美好',},{title: '欧式喷泉',subtitle: '高雅奢华 彰显品味',},{title: '欧式唯美花艺',subtitle: '色彩搭配 增添氛围',},{title: '欧式罗马花盆',subtitle: '高雅奢华 彰显品味',},{title: '欧式罗马柱',subtitle: '尽显欧式奢华与典雅',},{title: '梦幻天使',subtitle: '人间精灵 守护爱情',},{title: '梦幻蜡烛',subtitle: '温馨时尚 精致梦幻',},{title: '梦幻云朵棉',subtitle: '营造梦幻视觉感',},],},{id: 5,title: '迎宾签到区',list: [{title: '背景架',subtitle: '专业调配 质量保证',},{title: '主题布幔',subtitle: '丝质柔软 色彩鲜艳',},{title: '欧式吊幔',subtitle: '低调奢华 高端品质',},{title: '主题背景板',subtitle: '高贵圣洁 华丽梦幻',},{title: '主题桌布',subtitle: '丝质柔软 色彩鲜艳',},{title: '复古香水瓶',subtitle: '高贵优雅 浪漫情调',},{title: '复古首饰盒',subtitle: '蕴含着典雅的贵族风情',},{title: '欧式罗马花盆',subtitle: '高雅奢华 彰显品味',},{title: '欧式奢华烛台',subtitle: '欧式浪漫 奢华品质',},{title: '金色欧式烛台',subtitle: '高贵奢华 彰显品味',},{title: '梦幻天使小摆件',subtitle: '人间精灵 守护爱情',},{title: '复古留声机',subtitle: '色调高雅 回味经典',},{title: '欧式唯美花艺',subtitle: '色彩搭配 增添氛围',},{title: '梦幻蜡烛',subtitle: '温馨时尚 精致梦幻',},{title: '欧式复古罗马花盆',subtitle: '高雅奢华 彰显品味',},{title: '欧式雕花相框',subtitle: '高雅奢华 精雕细琢',},{title: '华丽玫瑰花',subtitle: '精致浪漫 时尚优雅',},{title: '精美藤蔓',subtitle: '线条优美 浪漫情调',},{title: '欧式雕花栅栏',subtitle: '雕刻精美 增添氛围',},{title: '复古蝴蝶',subtitle: '灵动优美 复古时尚',},{title: '主题签到笔',subtitle: '主题搭配 细节精致',},{title: '主题签到本',subtitle: '精美独特 主题搭配',},{title: '梦幻水晶灯',subtitle: '奢华璀璨 高贵典雅',},{title: '主题迎宾牌',subtitle: '独特设计 主题展示',},{title: '精美画架',subtitle: '欧式风格 完美搭配',},{title: '主题席位牌',subtitle: '主题搭配 细节精致',},],},{id: 6,title: '迎宾甜品区',list: [{title: '背景架',subtitle: '专业调配 质量保证',},{title: '主题布幔',subtitle: '丝质柔软 色彩鲜艳',},{title: '欧式吊幔',subtitle: '低调奢华 高端品质',},{title: '主题背景板',subtitle: '高贵圣洁 华丽梦幻',},{title: '梦幻logo字母',subtitle: '时尚新颖 温馨梦幻',},{title: '复古长条桌',subtitle: '典雅简约 华丽低调',},{title: '欧式雕花圆桌',subtitle: '精美雕花 端庄大气',},{title: '欧式实木雕花桌',subtitle: '浓厚的复古贵族气息',},{title: '梦幻水晶灯',subtitle: '奢华璀璨 高贵典雅',},{title: '复古首饰盒',subtitle: '蕴含着典雅的贵族风情',},{title: '精致甜品架',subtitle: '贴合主题 精致浪漫',},{title: '精致甜品盘',subtitle: '贴合主题 精致浪漫',},{title: '欧式雕花茶具',subtitle: '彰显欧式贵族风情',},{title: '欧式雕花椅',subtitle: '色调高雅 华丽复古',},{title: '复古小提琴',subtitle: '优雅别致 精美独特',},{title: '欧式唯美花艺',subtitle: '色彩搭配 增添氛围',},{title: '欧式罗马花盆',subtitle: '高雅奢华 彰显品味',},{title: '欧式罗马柱',subtitle: '尽显欧式奢华与典雅',},{title: '复古书本',subtitle: '复古文艺 经典传承',},{title: '梦幻蜡烛',subtitle: '温馨时尚 精致梦幻',},{title: '梦幻纱幔',subtitle: '唯美梦幻 轻盈飘逸',},{title: '优质插花网格',subtitle: '造型多变 主题搭配',},{title: '浪漫瀑布花',subtitle: '欧式浪漫 灵动优雅',},{title: '浪漫花瓣',subtitle: '营造气氛 增加层次',},],},{id: 7,title: '花艺设计区',list: [{title: '追光灯',subtitle: '新娘手捧 传递幸福',},{title: '精美胸花',subtitle: '胸前装饰 精致小巧',},{title: '精美腕花',subtitle: '手腕花艺 花香相伴',},{title: '精美车头花',subtitle: '婚车头车精美花艺',},],},{id: 9,title: '灯光舞美',list: [{title: '追光灯',subtitle: '突出中心 画龙点睛',},{title: '光束灯',subtitle: '光束集中 梦幻氛围',},{title: 'LED par灯',subtitle: '环境染色 烘托气氛',},{title: 'LED洗墙灯',subtitle: '渲染背景 增强效果',},{title: 'Par 64',subtitle: '基本光源 整体照明',},{title: '薄雾机',subtitle: '营造氛围 集中光束',},],},{id: 10,title: '婚礼执行',list: [{title: '婚礼管家',subtitle: '专业贴心的统筹服务',},{title: '婚礼执行',subtitle: '呈现婚礼完美现场',},{title: '花艺指导',subtitle: '用艺术的视觉呈现花之美',},{title: '婚礼管家',subtitle: '专业贴心的统筹服务',},{title: '婚礼执行',subtitle: '呈现婚礼完美现场',},{title: '花艺指导',subtitle: '用艺术的视觉呈现花之美',},{title: '婚礼执行',subtitle: '呈现婚礼完美现场',},{title: '花艺指导',subtitle: '用艺术的视觉呈现花之美',},{title: '灯光指导',subtitle: '营造最梦幻的婚礼气氛',},],},],},change(e) {this.setData({indexSize: e.detail.current})},scrollTo(e) {this.setData({indexSize: e.target.dataset.index})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

这个左右联动的只是实现初步的效果，点击那个nav显示那一块内容，下一章将展示一边滑动一边高亮的状态

小程序实现左右菜单联动（-）相关推荐

微信小程序 - 实现左右菜单联动功能
今天给大家分享一下如何实现微信小程序左右菜单栏联动效果(相关代码模块我已单独整理放到github上面了,欢迎前来start),具体过程如下: 效果图: github地址:https://githu ...
小程序-实现左右菜单联动功能
实现效果类似: 1.左边点击 -> 右边滚动的相应的分类 2.右边滑动 -> 左边的样式跟着改变 wxml <view class="goodsList"> ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
微信小程序左到右联动
今天说一下小程序经常遇到的联动案例,项目要求点左边右边的内容要对应的跳转,所以说当我们点击左侧边栏的时候要动态的把id传给右边的内容,使其对应,接下来就看看是怎么实现的吧.下节我会说一下右到左的联动, ...
小程序分类左右内容联动
小程序分类左右内容联动 https://developers.weixin.qq.com/s/thl1KOm77Nag
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能
这次给大家带来微信小程序做出外卖菜单点单功能,的注意事项有哪些,下面就是实战案例,一起来看一下. 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第 ...
按钮小程序弹出菜单_公众号怎么关联小程序
小程序开发之后很多人不知道怎么推广,今天给大家聊一下常见的在公众号里面关联小程序,直接打开我们单位小程序页面. 小程序正式推出后不久,微信就推出"公众号关联小程序"的功能.公众号运 ...

小程序实现左右菜单联动（-）

小程序实现左右菜单联动（-）相关推荐

最新文章

热门文章