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

一、项目展示

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

二、首页

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

核心代码如下：

<!--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>

三、收藏

核心代码如下：

项目代码如下：