【菜狗学前端】uniapp(vue3|微信小程序)实现外卖点餐的左右联动功能

记录,避免之后忘记......

一、目的:实现左右联动

  1. 右->左 滚动(上拉/下拉)右侧,左侧对应品类选中
  2. 左->右 点击左侧品类,右侧显示对应品类

二、实现右->左 滚动(上拉/下拉)右侧,左侧对应品类选中

1.在data()中初始化需要用到的数据

须知:左侧哪个品类选中是根据trigger==index比较得出的

2.在onLoad()中调用getheight()获取右侧各品类高度,给this.heightset数组赋值

javascript 复制代码
// 回调函数,在数据发生改变时,在渲染dom之后,回制动执行回调函数

// 获取不同分类的高度

this.$nextTick(()=>{

this.getheight()

})

getheight()函数:

javascript 复制代码
// 获取右侧各分类高度

getheight(){

const query=wx.createSelectorQuery()

query.selectAll('.rig-height').boundingClientRect()

query.exec(res=>{

let height=0

res[0].forEach(item=>{

height = height+item.height

this.heightset.push(height)

})

console.log(this.heightset);

})

}

打印结果:

3.给右侧<scroll-view>组件绑定滚动函数@scroll="scrollRight",根据实际滚动高度与当前品类高度比较结果改变trigger进而改变左侧选中品类。

javascript 复制代码
// 右侧滚动触发

scrollRight(e){

// console.log(e.detail.scrollTop)//获取当前滚动实际高度

if(e.detail.scrollTop>=this.heightset[this.trigger]){//上拉到下一个品类

this.trigger++

}else{

if(e.detail.scrollTop<this.heightset[this.trigger-1]){//下拉到上一个品类

this.trigger--

}

}

}

三、实现左->右 点击左侧品类,右侧显示对应品类

1.使用scroll-view组件的scroll-into-view属性实现

2.给左侧各品类绑定点击函数,改变this.trigger和this.scroll_into

相关推荐
m0_7482382721 分钟前
项目升级Sass版本或升级Element Plus版本遇到的问题
前端·rust·sass
升讯威在线客服系统1 小时前
如何通过 Docker 在没有域名的情况下快速上线客服系统
java·运维·前端·python·docker·容器·.net
AsBefore麦小兜1 小时前
Vite vs Webpack
前端·webpack
LaughingZhu1 小时前
PH热榜 | 2025-02-23
前端·人工智能·经验分享·搜索引擎·产品运营
道不尽世间的沧桑3 小时前
第17篇:网络请求与Axios集成
开发语言·前端·javascript
diemeng11194 小时前
AI前端开发技能变革时代:效率与创新的新范式
前端·人工智能
bin91536 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云7 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一7 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球7 小时前
el-button按钮的loading状态设置
前端·javascript