微信小程序项目实例——今日美食

文章目录

微信小程序项目实例——今日美食
一、项目展示
二、首页
三、收藏

项目代码见文字底部，点赞关注有惊喜

一、项目展示

今日美食是为用户提供各种美食的制作方法，详细介绍了配料和制作流程

二、首页

首页采用垂直布局，由搜索栏、轮播图、宫格三大组件组成
点击搜索栏将跳转到搜索界面，同时展示历史搜索内容

核心代码如下：

<!--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}}">没有更多数据</view>
</view>

三、收藏

个人收藏界面是对用户的收藏内容进行列表展示
展现形式和首页的宫格展现形式类似
点击后将展示美食的主要内容：

核心代码如下：

<!--pages/detailFood/detailFood.wxml-->
<!-- 底部固定喜欢收藏 -->
<view class="fixed-box"><view class="{{addLike.add?'add':''}} like" bindtap="funLike"><image src="{{addLike.url}}"></image>点赞</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"><!-- 菜品标题 --><text class="title-text">{{detail.title}}</text><!-- 菜品收藏点赞量 --><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><!-- 菜品难度、时间 --><view class="food-time"><view>烹饪难度：<text>{{detail.foodGrade}}</text></view><view>烹饪时间：<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>

项目代码如下：

项目代码

微信小程序项目实例——今日美食相关推荐

微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁文章目录微信小程序项目实例--手势解锁一.项目展示二.设置手势.手势解锁三.手势重置文末:项目代码项目代码见文字底部一.项目展示这是一款简单实用的手势解 ...
微信小程序项目实例——摇色子
微信小程序项目实例--摇色子文章目录微信小程序项目实例--摇色子一.项目展示二.核心代码三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示摇色子是一款简易的游戏类小程序用 ...
微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个文章目录微信小程序项目实例--食堂吃哪个一.项目展示二.操作流程和核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款娱乐性 ...
微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器文章目录微信小程序项目实例--体质计算器一.项目展示二.项目核心代码文末项目代码见文字底部,点赞关注有惊喜一.项目展示体质计算器是一款简单的健康类小程序 ...
微信小程序项目实例——记账本
微信小程序项目实例--记账本文章目录微信小程序项目实例--记账本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款简易的记账本小程序用户可以记 ...
微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本文章目录微信小程序项目实例--心情记事本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示心情记事本是一款可以记录当前心 ...
微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘文章目录微信小程序项目实例--幸运大转盘一.项目展示二.抽奖页三.领奖页文末:项目代码项目代码见文字底部,点赞关注有惊喜一.项目展示幸运大转盘是一个简 ...
微信小程序项目实例——狼人杀
微信小程序项目实例--狼人杀文章目录微信小程序项目实例--狼人杀一.项目展示二.首页三.游戏页四.特殊角色文末项目代码见文字底部,点赞关注有惊喜一.项目展示狼人杀是一款多人参与的, ...
微信小程序项目实例——我有一支画笔（画画）
微信小程序项目实例--我有一支画笔(画画) 文章目录微信小程序项目实例--我有一支画笔(画画) 一.项目展示二.首页三.自由绘图四.照片绘图文末项目代码见文字底部,点赞关注有惊喜一.项目 ...

微信小程序项目实例——今日美食

微信小程序项目实例——今日美食

文章目录

一、项目展示

二、首页

三、收藏

微信小程序项目实例——今日美食相关推荐

最新文章

热门文章