WeChatミニプログラムがテイクアウトメニュー注文機能を作成

今回は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 サイトの他の関連記事に注目してください。

推奨読書:

プロジェクトでAngularjsカスタム命令を使用する方法

nodeJSモジュールを使用する方法

以上がWeChatミニプログラムがテイクアウトメニュー注文機能を作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。