微信小程序?qū)崿F(xiàn)美食展示與收藏功能

更新時(shí)間：2022年03月05日 09:30:27 作者：失散多年的哥哥

這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)美食展示與收藏的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下

一、項(xiàng)目展示

今日美食是為用戶提供各種美食的制作方法，詳細(xì)介紹了配料和制作流程

二、首頁(yè)

首頁(yè)采用垂直布局，由搜索欄、輪播圖、宮格三大組件組成

點(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)形式和首頁(yè)的宮格展現(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: