今回はWeChatアプレットを利用してテイクアウトメニューの注文機能を作成する際の注意点をいくつかご紹介します。実際の事例を見てみましょう。
1. この機能はメニュー機能の一部にすぎません。参考までに
2. 要件の説明: 右側の料理セクションがスクロールしているとき、左側の料理の選択されたカテゴリが対応します。右側の料理の最初の列。
私の実装方法: (各料理の高さ * このカテゴリ内の料理の数) + 料理カテゴリの高さ = x、スクロールするたびに、現在のscrollTopがxの範囲内にあるかどうかを判断します。左側のカテゴリを選択します: 左側は変更しないでください。
問題: ディッシュの高さを設定する単位は rpx ですが、scrollTop の単位は px です。つまり、上で計算した x は変数です。テストモデルを変更した場合、本機能は無効となります。 。 。何か良い方法はありますか?
onLoad(e) { let goodsList = this.data.goodsList; // 初始化每项菜品距离顶部的距离 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; }, // 右侧滚动事件 onGoodsScroll: function (e) { let that = this; // 当前滚动部分距离页面顶部距离 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 }) } } }
上記の質問2について、解決策は以下の通りなのですが、具体的なパラメータがどうなっているのか理解できず、位置決めもあまり正確ではありませんので、何か良い解決策があればお願いします。
// 右侧滚动事件 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, }) },
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がWeChatミニプログラムがテイクアウトメニュー注文機能を作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。