文章目录

效果图

代码

页面设计

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

<!--pages/home/home.wxml-->
<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",
    })
  }
})

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。