★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app一个像商城分类中心一样的联动侧边栏导航分类

 2020/10/1 17:07:20  字体:  浏览 1088 我要评论

<template>
<view>
<view class="ld">
<view class="left">
<scroll-view :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="clickToId" :style="{ height: windowHeight }">
<view v-for="(item, index) in list" :key="index">
<view :class="['title', { active: index === currentNum }]" :id="'to' + index" @click="setId(index)">{{ item.title }}</view>
</view>
</scroll-view>
</view>
<view class="right">
<scroll-view :scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true" :scroll-y="true" :style="{ height: windowHeight }">
<view v-for="(item, index) in list" :key="index">
<view class="title,right_title" :id="'po' + index">{{ item.title }}</view>
<view v-for="(it, idx) in item.list" :key="idx">
<text class="item">{{ it }}</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
list: [
{
title: '菜单1',
list: ['盖饭1', '大白菜1', '土豆1', '西红柿1', '辣椒1']
},
{
title: '菜单2',
list: ['盖饭2', '大白菜2', '土豆2', '西红柿2', '辣椒2']
},
{
title: '菜单3',
list: ['盖饭3', '大白菜3', '土豆3', '西红柿3', '辣椒3']
},
{
title: '菜单4',
list: ['盖饭4', '大白菜4', '土豆4', '西红柿4', '辣椒4']
},
{
title: '菜单5',
list: ['盖饭5', '大白菜5', '土豆5', '西红柿5', '辣椒5']
},
{
title: '菜单6',
list: ['盖饭6', '大白菜6', '土豆6', '西红柿6', '辣椒6']
},
{
title: '菜单7',
list: ['盖饭7', '大白菜7', '土豆7', '西红柿7', '辣椒7']
},
{
title: '菜单8',
list: ['盖饭8', '大白菜8', '土豆8', '西红柿8', '辣椒8']
},
{
title: '菜单9',
list: ['盖饭9', '大白菜9', '土豆9', '西红柿9', '辣椒9']
},
{
title: '菜单10',
list: ['盖饭10', '大白菜10', '土豆10', '西红柿10', '辣椒10']
},
{
title: '菜单11',
list: ['盖饭11', '大白菜11', '土豆11', '西红柿11', '辣椒11']
},
{
title: '菜单12',
list: ['盖饭12', '大白菜12', '土豆12', '西红柿12', '辣椒12']
},
{
title: '菜单13',
list: ['盖饭13', '大白菜13', '土豆13', '西红柿13', '辣椒13']
}
],
windowHeight: '0px',
clickId: '',
clickToId: '',
currentNum: 0,
topList: [],
isLeftClick: false
};
},
methods: {
setId(index) {
this.clickId = 'po' + index;
this.isLeftClick = true;
this.currentNum = index;
},
scroll(e) {
if (this.isLeftClick) {
this.isLeftClick = false;
return;
}
let scrollTop = e.target.scrollTop;
for (let i = 0; i < this.topList.length; i++) {
let h1 = this.topList[i];
let h2 = this.topList[i + 1];
if (scrollTop >= h1 && scrollTop < h2) {
this.currentNum = i;
this.clickToId = 'to' + i;
}
//解决滚动到最后选项左侧不会选中
let length = this.topList.length;
if (scrollTop >= this.topList[length - 1]) {
this.currentNum = length - 1;
this.clickToId = 'to' + length - 1;
}
}
},
getNodesInfo() {
//获取节点为.right_title距离顶部的距离,返回值放在数组中
const query = uni.createSelectorQuery().in(this);
query
.selectAll('.right_title')
.boundingClientRect()
.exec(res => {
console.log(res);
let nodes = res[0];
let rel = [];
nodes.map(item => {
rel.push(item.top);
});
console.log(rel);
this.topList = rel;
});
}
},
onLoad() {
let _that = this;
uni.getSystemInfo({
success: function(res) {
_that.windowHeight = res.windowHeight + 'px';
}
});
this.getNodesInfo();
}
};
</script>

<style lang="less">
.ld {
display: flex;

.left {
width: 160upx;
border-right: 1upx solid red;

.title {
text-align: center;
height: 100upx;
line-height: 100upx;
color: #000000;
}
.active {
background-color: #dd524d;
color: #ffffff;
}
}

.right {
flex: 1;

.title {
color: #dd524d;
padding: 20upx;
font-weight: 700;
}

.item {
padding-left: 20upx;
display: inline-block;
height: 350upx;
}
}
}
</style>

相关阅读
( 2021/1/19 22:10:48 )一次自动化批量处理服务器上几万张图片
( 2021/1/8 21:47:38 )uni-app三目运算class和style
( 2021/1/5 20:10:06 )uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
( 2021/1/5 19:50:31 )微信小程序开发中链接navigateTo与redirectTo的对比说明
( 2020/12/27 21:57:47 )使用uni-app开始小程序使用腾讯视频插件vid播放视频
( 2020/12/18 14:43:35 )微信小程序-接入广告
( 2020/12/18 14:13:25 )uni-app微信小程序获得用户头像与名称
( 2020/12/18 14:10:56 )微信公众号生成带参数的二维码asp源码下载
共有0条关于《uni-app一个像商城分类中心一样的联动侧边栏导航分类》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
uni-app微信小程序获得用户头像与名称
微信小程序转uni-app项目
支持win7的nodejs版本
uni-app浏览历史记录功能实现
uni-app 搜索、历史记录功能简单实现
更多>>最新添加文章
一次自动化批量处理服务器上几万张图片
uni-app三目运算class和style
uni-app跨端开发微信小程序时页面栈超过10层时小程序像卡死一样假性不能点击无法跳转的解决方案
微信小程序开发中链接navigateTo与redirectTo的对比说明
使用uni-app开始小程序使用腾讯视频插件vid播放视频
微信小程序-接入广告
uni-app微信小程序获得用户头像与名称
微信公众号生成带参数的二维码asp源码下载
更多>>随机抽取信息
一个非常适和div+css初学者看的例子,看完之后,相信你的DIV+CSS技术一定会上一个层次
以前的QQ强聊不管了,这个是非常管用的QQ强聊
一个可以选择变化背景色的小程序
点击密码框弹出小键盘
更变态的页面右击失效代码,选择,全选,全部失效
javascript自动获取Tags关键字
一个几个图片来回变幻的超炫的图片转换效果
可以用于考试系统中试卷上交的javascript倒计时