小程序点餐系统——首页

╰半夏微凉° 2022-11-17 05:19 124阅读 0赞

### 文章目录 ###

*  效果图
 *  代码
 *   *  页面设计
     *  页面样式
     *  页面逻辑

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

# 代码 #

## 页面设计 ##

轮播图基本配置比较简单，在本文中不做过多讲解

<block wx:for="{ {listData}}" wx:key="itemlist">
      
      <swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {autoplay}}" interval="{ {interval}}" duration="{ {duration}}">
        <block wx:for="{ {item.imgUrls}}" wx:for-item="imgItem" wx:key="{ {item.id}}">
          <swiper-item>
            <image class="slide-image" src="{ {imgItem.src}}"></image>
          </swiper-item>
        </block>
      </swiper>
      
      <view class="menu-bar">
        <view class="menu-block" bindtap="gostart">
          <view class="menu-start">开启点餐之旅→</view>
        </view>
      </view>
      
      <view class="ad-box">
        <image src="{ {item.image_ad}}" class="image-ad"></image>
      </view>
      
      <view class="bottom-box">
        <view class="bottom-pic" wx:for="{ {item.image_bottom}}" wx:for-item="bottomItem" wx:key="{ {item.id}}">
          <image src="{ {bottomItem.src}}" class="btm-image" data-id="{ {bottomItem.id}}"></image>
        </view>
      </view>
    </block>

## 页面样式 ##

/* pages/home/home.wxss */
    /* 轮播图样式 */
    .slide-image{ 
      width:100%;
      height:280rpx;
    }
    /* 开启点餐之旅 */
    .menu_bar{ 
      display: flex;
      margin-top:20px;
    }
    .menu-block{ 
      width: 50%;
      display: flex;
      justify-content:center;
      margin:0 auto;
    }
    .menu-start{ 
      text-align: center;
      font-size:14px;
      color:#fff;
      padding: 5px 20px;
      background:  #FF9C35;
      border-radius: 20px;
      width: 100px;
    }
    /* 中间部分广告 */
    .ad-box{ 
      margin-top:30px;
      width: 100%;
     text-align: center;
    }
    .image-ad{ 
      width: 95%;
      height:370rpx;
    }
    /* 底部图片展示 */
    .bottom-box{ 
      margin-top:40rpx;
      display: flex;
      width: 100%;
      padding: 0 20rpx;
      flex-direction: row ;
      flex-wrap:wrap;
      justify-content:space-between;
      box-sizing: border-box;
    }
    .bottom-pic{ 
      width: 49%;
      display:inline-block;
    }
    .btm-image{ 
      width:100%;
      height:170rpx
    }

## 页面逻辑 ##

// pages/home/home.js
    const fetch = require('../../utils/fetch.js')
    Page({ 
      data: { 
        // 显示面板指示点
        indicatorDots: true,
        // 图片自动切换
        autoplay: true,
        // 自动切换时间间隔
        interval: 5000,
        // 滑动动画时长
        duration: 1000
      },
      onLoad: function(options) { 
        // 显示模态对话框
        wx.showLoading({ 
          title: "努力加载中"
        })
        // 请求数据
        fetch('food/index').then((res) => { 
          // 请求成功，关闭对话框
          wx.hideLoading();
          // 把接口返回数据setData给listData
          this.setData({ 
            listData: res.data,
          })
        },() => { 
          // 请求失败，关闭对话框，执行fetch.js文件中的fail方法
          wx.hideLoading();
        });
      },
      gostart: function() { 
        wx.navigateTo({ 
          url: "../list/list",
        })
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/3b8df48d31494da7b9a31d727426d129.png