السابق: الصغير الصغير مول (C): الرئيسية الكهرباء المورد غير محدود المنسدلة التحديث تحقيق API البيانات الديناميكي

رؤية النتائج

خطة التنمية

1، لتحقيق تفاصيل المنتج تخطيط الصفحة (ثلاث وحدات لتحقيق ذلك، رئيس صور المنتجات دائري، وأسعار السلع وتوصيف السلع وتفاصيل سلعة تظهر) 2، يطلب API تحميل البيانات الديناميكية وفقا لمختلف ينقر المستخدم السلع

الحصول على المنتج تفاصيل نموذج البيانات API استنادا إلى معرف المنتج

هناك المفصلة أدناه نموذج البيانات يمكن أن ينظر أوه!

home.js زيادة قوائم الحدث السريع

تذكر أن نقوم به على سلعة انقر لعرض تفاصيل الحدث جمع مثل هذه المعلومات؟ ذلك إلى جانب وظيفة قفزة صفحة تفاصيل المنتج، كما هو مبين أدناه:

detail.wxml

< swiper مؤشر النقاط = "{{}} indicatorDots" التشغيل التلقائي = "{{}} التشغيل التلقائي" = الفاصلة "{{فترة}}" مدة = "{{}} مدة" > < كتلة WX: ل= "{{}} goods.imgUrls" > < swiper البند > < صورة SRC = "{{}} البند" بيانات SRC = "{البند} {}" bindtap = "previewImage" واسطة = "widthFix" > < / صورة > < / Swiper البند > < / بلوك > < / Swiper > < ! - أسعار السلع الأساسية وتوصيف السلع - > < رأي > < طريقة عرض الفئة = "المنتج اسم التفاف" > {{}} Goods.title < / عرض > < طريقة عرض الفئة = "المنتج السعر التفاف" > < رأي > < الطبقة ص = "المنتج السعر الجديد" > {{}} goods.price < / P > < الطبقة ص = "المنتج السعر من العمر" > قائمة {{}} goods.privilegePrice < / P > < / عرض > < / عرض > < / عرض > < طريقة عرض الفئة = "التفاصيل" > < التمرير عرض التمرير ذ = "صحيح" > < نص > تفاصيل المنتج < نص / > < كتلة WX: لبنود = "{goods.detailImg} {}" دبليو: مفتاح = "اسم" > < الطبقة صورة = "image_detail" SRC = "{{}} بند" واسطة = "widthFix" / > < / بلوك > < طريقة عرض الفئة = "مؤقت" > < / عرض > < / انتقل الرؤية > < / عرض >

detail.wxss

الصفحة { عرض: المرن. المرن الاتجاه: عمود. الطول: 100؛ } / * مجموعة swiper مباشرة الملكية * / swiper { / * الطول: 500rpx؛ * / الطول: 750rpx. } صورة swiper البند { عرض: 100؛ الطول: 100؛ } / ** ** أسعار السلع الأساسية / . المنتج السعر التفاف { عرض: المرن. تبرير المحتوى: الفضاء بين؛ / ** ** ضبط / المرن الاتجاه: صف واحد. المرن الختامية: التفاف. هامش: 5px 5px؛ / * الحدود: 1rpx الصلبة الأحمر؛ * / } . المنتج السعر الختامية. المنتج السعر الجديد { اللون: الأحمر، حجم الخط: 40rpx. هامش: 10rpx. } . المنتج السعر الختامية من العمر. المنتج السعر { اللون: # 888؛ النص الديكور: خط من خلال. يسار الحشو: 5px؛ حجم الخط: 12px؛ خط الطول: 30px؛ الخط الوزن: 300؛ } . المنتج اسم التفاف { هامش: 0px 10px؛ حجم الخط: 14px؛ اللون: # 404040؛ } . التفاصيل، { الحشو: 05px 05px؛ } .detail { عرض: المرن. المرن الاتجاه: عمود. هامش قمة: 15rpx. هامش القاع: 0rpx. } .title .detail { حجم الخط: 40rpx. هامش: 10rpx. اللون: أسود، مواءمة النصوص: تبرير؛ الطول: 100rpx. } .price .detail { اللون: الأحمر، حجم الخط: 40rpx. هامش: 10rpx. } .line_flag { عرض: 80rpx. الطول: 1rpx. عرض: مضمنة كتلة. هامش: 20rpx السيارات. لون الخلفية: gainsboro. مواءمة النصوص: المركز؛ } .line { عرض: 100؛ الطول: 2rpx. عرض: مضمنة كتلة. هامش: 20rpx 0rpx. لون الخلفية: gainsboro. مواءمة النصوص: المركز؛ } .detail-الملاحة { عرض: المرن. المرن الاتجاه: صف واحد. محاذاة البنود: المركز؛ تعويم: غادر؛ لون الخلفية: # الاتحاد الفرنسي. الموقف: ثابت؛ أسفل: 0؛ الحق: 0؛ ض مؤشر: 1؛ عرض: 100؛ الطول: 100rpx. } .button الأخضر { لون الخلفية: # 4caf50؛ / * الخضراء * / } .button الأحمر { لون الخلفية: # f44336؛ / * الأحمر * / } .button-addCar { لون الخلفية: # f44336؛ / * الأحمر * / عرض: 100؛ } .image_detail { عرض: 100؛ / * الطول: 750rpx؛ * / } صورة .detail-NAV { عرض: 70rpx. الطول: 50rpx. هامش: 20rpx 40rpx. } .line_nav { عرض: 5rpx. الطول: 100؛ لون الخلفية: gainsboro. } / * بصمة * / .temp { الطول: 100rpx. }

detail.js

CONST اياكس = تتطلب ( '../../ تيلس / ajax.js')؛ تيلس CONST = تتطلب ( '../../ تيلس / util.js')؛ imgUrls فار = ؛ فار detailImg = ؛ فار goodsId = فارغة؛ البضائع فار = فارغة؛ الصفحة ({/ ** * صفحة البيانات الأولية * / بيانات: { isLike: صحيح، showDialog: كاذبة، السلع: باطل، indicatorDots: صحيح، // ما إذا كان عرض لوحة تشير إلى نقطة التشغيل التلقائي: صحيح، // ما إذا كان التبديل تلقائيا فاصل: 3000، // التلقائي تبديل الفاصل الزمني، 3S مدة: 1000، عندما الشريحة المتحركة 1S // } // صورة المعاينة previewImage: وظيفة (ه) { فار الحالية = e.target.dataset.src. wx.previewImage ({ الحالي: الحالية، // HTTP تصل إلى الصورة المعروضة حاليا عناوين: this.data.imgUrls // HTTP يربط الحاجة إلى قائمة معاينة الصور }) }، / ** * وظيفة دورة الحياة - الاستماع لتحميل الصفحة * / ONLOAD: وظيفة (خيارات) { فار أن = هذا. goodsId = options.goodsId. console.log ( 'goodsId:' + goodsId)؛ // تحميل تفاصيل المنتج that.goodsInfoShow ()؛ }، goodsInfoShow: وظيفة (النجاح) { فار أن = هذا. ajax.request ({ الأسلوب: 'GET'، رابط: '؟ السلع / getGoodsInfo مفتاح = "+ utils.key +' & goodsId = '+ goodsId، نجاح: البيانات = >  { فار goodsItem = data.result. ل(فار ط = 0؛ ط <  goodsItem.shopGoodsImageList.length، وأنا ++) { imgUrls  = GoodsItem.shopGoodsImageList .imgUrl. } تفاصيل فار = goodsItem.details.split ( "؛")؛ ل(فار ي = 0؛ ي <  details.length؛ ي ++) { detailImg  = تفاصيل . } بضائع = { imgUrls: imgUrls، عنوان: goodsItem.name، السعر: goodsItem.price، privilegePrice: goodsItem.privilegePrice، detailImg: detailImg، imgUrl: goodsItem.imgUrl، buyRate: goodsItem.buyRate، goodsId: goodsId، العد: 1، totalMoney: goodsItem.price، } that.setData ({ السلع: البضائع }) console.log (goods.title) } }) }، })

تعليق

يتم الحصول على البيانات سلسلة مول الصغير الصغير الصغير القناة من خلال HTTPS ديناميكية والحاضر، فمن المستحسن أن تبدأ القراءة من الفصل الأول. نحن يمكن أن تدعم هذه السلسلة من المقالات سوف تستمر في تحديثه، شكرا لك!

صغيرة قناة الصغرى سلسلة برنامج الصغيرة مول

متجر الصغير التطبيق الصغير (أ): HTTPS هياكل الإطار والملاحة وظيفة

الصغرى قناة الدقيقة الصغير مول (2): المورد الكهرباء الرئيسية دائري والملاحة وتصنيف لتحقيق بيع جديد

الصغير الصغير مول (C): الرئيسية الكهرباء المورد غير محدود المنسدلة التحديث تحقيق API البيانات الديناميكي

تابعنا

إذا كنت بحاجة إلى شفرة المصدر يمكن أن تركز على "IT تحالف مكافحة" ورسالة (المصدر الجزئي مول، فإن خمس كلمات استقبال شفرة المصدر تحميل، أن ننظر إلى شفرة المصدر داخل دليل التشغيل سوف يستغرق الكثير أقل الطرق الالتفافية)، قد تنضم أيضا مجموعة ومؤلف تبادل ندف يا ~ ~ ~