微信小程序?qū)崿F(xiàn)美團(tuán)菜單
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)美團(tuán)菜單的具體代碼,供大家參考,具體內(nèi)容如下
1.功能僅是菜單功能一部分,僅供參考
2.需求描述:右側(cè)菜品部分在滾動(dòng)的時(shí)候,左側(cè)菜品選中分類與右側(cè)第一行菜品所在分類對(duì)應(yīng)。
我的實(shí)現(xiàn)方式:(每個(gè)菜品高度*該分類菜品數(shù)量)+菜品分類高度 = x, 每次滾動(dòng)的時(shí)候判斷當(dāng)前scrollTop是否在x范圍內(nèi)?左側(cè)選中該分類:左側(cè)不做改變;
問(wèn)題:我設(shè)置菜品高度的單位是rpx,而scrollTop的單位是px,這也就是說(shuō),上面我計(jì)算的x是個(gè)變量, 所以當(dāng)改變測(cè)試機(jī)型,這個(gè)功能就失效了。。。請(qǐng)教各位有什么好的方法沒(méi)?
onLoad(e) { let goodsList = this.data.goodsList; // 初始化每項(xiàng)菜品距離頂部的距離 for (let i = 0; i < goodsList.length; i++) { if (i != 0) goodsList[i].scrollTop = parseInt(goodsList[i - 1].scrollTop) + parseInt((goodsList[i - 1].goods.length * 90) + 35) } this.data.goodsList = goodsList; }, // 右側(cè)滾動(dòng)事件 onGoodsScroll: function (e) { let that = this; // 當(dāng)前滾動(dòng)部分距離頁(yè)面頂部距離 let scrollTop = parseInt(e.detail.scrollTop); let goodsList = that.data.goodsList; for (let i = 0; i < goodsList.length; i++) { let currentScrollTop = goodsList[i].scrollTop; let nextScrollTop = 0; if ((i + 1) == goodsList.length) nextScrollTop = goodsList[i].scrollTop; else nextScrollTop = goodsList[i + 1].scrollTop; if (currentScrollTop < scrollTop && scrollTop < nextScrollTop) { that.setData({ classifyIdLeft: goodsList[i].id, classifySeleted: goodsList[i].id }) } } }
關(guān)于上面提到的問(wèn)題2,解決方法如下,但是具體參數(shù)沒(méi)搞明白怎么回事,而且定位也不是很準(zhǔn),請(qǐng)求各位有什么好方法。
// 右側(cè)滾動(dòng)事件 onGoodsScroll: function (e) { let that = this; let scale = e.detail.scrollWidth / 600; let scrollTop = e.detail.scrollTop / scale; let h = 0; let classifySeleted; let len = that.data.goodsList.length; that.data.goodsList.forEach(function (classify, i) { var _h = 70 + classify.goods.length * 180; if (scrollTop >= h - 100 / scale) { classifySeleted = classify.id; } h += _h; }); that.setData({ classifySeleted: classifySeleted, classifyIdLeft: classifySeleted, }) },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能【附源碼下載】
- 微信小程序 action-sheet 反饋上拉菜單簡(jiǎn)單實(shí)例
- 微信小程序?qū)崙?zhàn)之自定義抽屜菜單(7)
- 微信小程序 下拉菜單簡(jiǎn)單實(shí)例
- 微信小程序 仿美團(tuán)分類菜單 swiper分類菜單
- 微信小程序 下拉菜單的實(shí)現(xiàn)
- 微信公眾號(hào)菜單配置微信小程序?qū)嵗斀?/a>
- 微信小程序 特效菜單抽屜效果實(shí)例代碼
- 微信小程序開(kāi)發(fā)之圓形菜單 仿建行圓形菜單實(shí)例
- 微信小程序 action-sheet底部菜單詳解
相關(guān)文章
JavaScript 中如何實(shí)現(xiàn)并發(fā)控制
在日常開(kāi)發(fā)過(guò)程中,你可能會(huì)遇到并發(fā)控制的場(chǎng)景,比如控制請(qǐng)求并發(fā)數(shù)。那么在 JavaScript 中如何實(shí)現(xiàn)并發(fā)控制呢?在回答這個(gè)問(wèn)題之前,我們來(lái)簡(jiǎn)單介紹一下并發(fā)控制。2021-05-05微信小程序常見(jiàn)頁(yè)面跳轉(zhuǎn)操作簡(jiǎn)單示例
這篇文章主要介紹了微信小程序常見(jiàn)頁(yè)面跳轉(zhuǎn)操作,結(jié)合簡(jiǎn)單實(shí)例形式總結(jié)分析了微信小程序保留頁(yè)面跳轉(zhuǎn)、關(guān)閉頁(yè)面跳轉(zhuǎn)、返回上一級(jí)頁(yè)面等各種常見(jiàn)的跳轉(zhuǎn)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03基于JS代碼實(shí)現(xiàn)圖片在頁(yè)面中旋轉(zhuǎn)效果
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)圖片在頁(yè)面中旋轉(zhuǎn)效果 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06以JavaScript來(lái)實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法
這篇文章主要介紹了以JavaScript來(lái)實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法,文中首先對(duì)WordPress基本的PHP導(dǎo)航菜單的做法給出了說(shuō)明來(lái)作為基礎(chǔ),需要的朋友可以參考下2015-12-12from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action
這篇文章主要介紹了from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action,需要的朋友可以參考下2014-04-04使用JavaScript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)
由于javascript無(wú)法獲取img文件頭數(shù)據(jù),必須等待其加載完畢后才能獲取真實(shí)的大小,所以lightbox類效果為了讓圖片居中顯示,導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。2011-03-03原生JS實(shí)現(xiàn)-星級(jí)評(píng)分系統(tǒng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)-星級(jí)評(píng)分系統(tǒng)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08