微信小程序?qū)崿F(xiàn)美食展示與收藏功能
一、項(xiàng)目展示
今日美食是為用戶提供各種美食的制作方法,詳細(xì)介紹了配料和制作流程
二、首頁
首頁采用垂直布局,由搜索欄、輪播圖、宮格三大組件組成
點(diǎn)擊搜索欄將跳轉(zhuǎn)到搜索界面,同時(shí)展示歷史搜索內(nèi)容
核心代碼如下:
<!--index.wxml--> <view class="container" > <view class="section"> <navigator url="/pages/searchList/searchList" hover-class="navigator-hover"> <view class="search" >搜索從這里開始</view> <image src="../img/search.png"/> </navigator> </view> <!-- 輪播圖片 --> <view class="swiper-box"> <swiper indicator-dots="{{swiper.indicatorDots}}" indicator-color="{{swiper.indicatorColor}}" indicator-active-color="{{swiper.indicatorActiveColor}}" autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" circular="{{swiper.s}}"> <block wx:for="{{swiper.imgUrls}}"> <swiper-item> <navigator data-id="{{item.id}}" url="/pages/detailFood/detailFood?id={{item.id}}" hover-class="navigator-hover"> <image src="{{item.name}}" class="slide-image" mode="apsectFit"/> </navigator> </swiper-item> </block> </swiper> </view> <!-- 今日推薦 --> <view class="todayNew"> <view class="todayTitle"> 今日推薦 </view> <view class="todayList " > <navigator class="todayItem " wx:for="{{todayListArr}}" data-id="{{item.id}}" url="/pages/detailFood/detailFood?id={{item.id}}" hover-class="navigator-hover"> <image src="{{item.imgUrl}}"/> <text>{{item.text}}</text> </navigator> </view> </view> <!-- 上拉加載更多 --> <view hidden="{{noMore}}"> <view class="loadMore" hidden="{{isLoading}}">上拉加載更多</view> <view class="loadMore" hidden="{{!isLoading}}">加載中...</view> </view> <view class="loadMore" hidden="{{!noMore}}">沒有更多數(shù)據(jù)</view> </view>
三、收藏
個(gè)人收藏界面是對(duì)用戶的收藏內(nèi)容進(jìn)行列表展示
展現(xiàn)形式和首頁的宮格展現(xiàn)形式類似
點(diǎn)擊后將展示美食的主要內(nèi)容:
核心代碼如下:
<!--pages/detailFood/detailFood.wxml--> <!-- 底部固定喜歡收藏 --> <view class="fixed-box"> <view class="{{addLike.add?'add':''}} like" bindtap="funLike"><image src="{{addLike.url}}"></image>點(diǎn)贊</view> <view class="{{addSave.add?'add':''}} save" bindtap="funSave"><image src="{{addSave.url}}"></image>收藏</view> </view> <!-- 詳情 --> <view class="content"> <!-- 菜品圖片 --> <view class="title-image"> <image src="{{detail.imgUrl}}"></image> </view> </view> <view class="container detail-container"> <!-- 菜品標(biāo)題 --> <text class="title-text">{{detail.title}}</text> <!-- 菜品收藏點(diǎn)贊量 --> <view class="like-save-count"> <view class="author"> <image src="../img/tou02.png"></image> {{detail.author}} </view> <view class="like-count"> <image src="../img/like02.png"></image> {{detail.like}} </view> <view class="save-count"> <image src="../img/save04.png"></image> {{detail.save}} </view> </view> <!-- 菜品描述 --> <view class="food-text"> {{detail.foodText}} </view> <!-- 菜品難度、時(shí)間 --> <view class="food-time"> <view>烹飪難度:<text>{{detail.foodGrade}}</text></view> <view>烹飪時(shí)間:<text>{{detail.foodTime}}</text></view> </view> <!-- 食材清單 --> <view class="food-listbox01"> <view class="food-list-title">——食材清單——</view> <view class="food-list" > <view class="food-item" wx:for="{{detail.materialListArr}}"> <text>{{item.name}}</text> <text>{{item.count}}g</text> </view> </view> </view> <!-- 做法步驟 --> <view class="way-listbox"> <view class="food-list-title">——做法步驟——</view> <view class="way-list"> <view class="way-item" wx:for="{{detail.wayListArr}}"> <text>{{index+1}}</text>{{item}} </view> </view> </view> <!-- 圖片分享 --> <view class="pic-listbox"> <view class="food-list-title">——圖片分享——</view> <view class="pic-list"> <view class="pic-item" wx:for="{{detail.picListArr}}"> <text>{{index+1}}</text> <image src="{{item}}"></image> </view> </view> </view> <!-- 烹飪小竅門 --> <view class="little-tip"> <view class="food-list-title">——烹飪小竅門——</view> <view class="tip-content"> {{detail.tipContent}} </view> </view> </view>
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)美食展示與收藏功能的文章就介紹到這了,更多相關(guān)小程序美食展示收藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Js得到radiobuttonlist選中值的兩種方法(推薦)
下面小編就為大家?guī)硪黄狫s得到radiobuttonlist選中值的兩種方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08基于JS實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,需要的可以參考下2023-05-05JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案
這篇文章主要介紹了JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案,想深入了解JS的同學(xué),一定要看下2021-05-05javascript和jquery分別實(shí)現(xiàn)的九九乘法表代碼
javascript 九九乘法表 附j(luò)query 實(shí)現(xiàn)的九九乘法表代碼2010-03-03js 創(chuàng)建一個(gè)浮動(dòng)div的代碼
js 創(chuàng)建一個(gè)浮動(dòng)div的代碼,一般用來指導(dǎo)用戶下面的操作與多條件選擇。點(diǎn)擊一下就可顯示,具體的大家可以自由發(fā)揮。2009-12-12如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02動(dòng)態(tài)加載dtree.js樹treeview(示例代碼)
本篇文章主要是對(duì)動(dòng)態(tài)加載dtree.js樹treeview的示例代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12