微信小程序点餐系统幻灯及食物列表样式模板制作设计下载 立即下载
首页 > 小程序教程 > 微信小程序点餐系统幻灯及食物列表样式模板制作设计下载

微信小程序点餐系统幻灯及食物列表样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下：
一、wxml页面代码如下：
<view>
  <swiper class="swiper-menu" indicator-dots="true" autoplay="true" interval="3000" duration="500">
    <block wx:for="{{imgUrls}}">
      <swiper-item class="swiper-imgs">
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="nav">
  <view class="search-btn">
    <image src="/images/search_ico.png"></image>
  </view>
  <view class="menu-info">
    <view class="default active">默认</view>
    <view class="new">最新</view>
    <view class="hot">最热</view>
  </view>
</view>
<view class="aslide-menu">
  <scroll-view class="aslide-box" scroll-y="true" scroll-x="false">
    <view class="{{status==0 ? 'in' : ''}}" data-index="0" bindtap="changeMenu">推荐</view>
    <view class="{{status==1 ? 'in' : ''}}" data-index="1" bindtap="changeMenu">粤菜</view>
    <view class="{{status==2 ? 'in' : ''}}" data-index="2" bindtap="changeMenu">汤水</view>
    <view class="{{status==3 ? 'in' : ''}}" data-index="3" bindtap="changeMenu">套餐</view>
  </scroll-view>
  <view class="aslide-content-section">
    <scroll-view class="aslide-content" scroll-y="false" scroll-x="true" scroll-into-view="{{currentPosition}}" scroll-with-animation="true" bindscrolltolower="scrollBottom">
      <view id="order0" class="aslide-item">
        <text class="aslide-item-title">推荐</text>
        <view class="aslide-item-info">
          <view class="aslide-item-img" bindtap="previewImages">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img" bindtap="previewImages">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
      </view>
      <view id="order1" class="aslide-item">
        <text class="aslide-item-title">粤菜</text>
        <view class="aslide-item-info">
          <view class="aslide-item-img" bindtap="previewImages">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
      </view>
      <view id="order2" class="aslide-item">
        <text class="aslide-item-title">汤水</text>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
      </view>
      <view id="order3" class="aslide-item">
        <text class="aslide-item-title">套餐</text>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
        <view class="aslide-item-info">
          <view class="aslide-item-img">
            <image src="/images/food.jpg"></image>
          </view>
          <view class="cart-info-container">
            <text class="food-name">澳洲牛排</text>
            <text class="red">￥88.00</text>
            <image class="cart-add" src="/images/add.png"></image>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
 
二、wxss样式文件代码如下：
/**index.wxss**/

.swiper-menu, .swiper-imgs, .swiper-imgs image {
  width: 100%;
  height: 340rpx;
}

.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 750rpx;
  height: 72rpx;
  background-color: #f0f3f8;
  font-size: 28rpx;
}

.search-btn {
  width: 200rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  box-sizing: border-box;
  border-right: #bbc6d2 1px solid;
}

.menu-info {
  display: flex;
  flex-direction: row;
  width: 550rpx;
}

.search-btn image {
  width: 43rpx;
  height: 42rpx;
  vertical-align: middle;
}

.default, .new, .hot {
  flex: 1;
  text-align: center;
  box-sizing: border-box;
  border-right: #bbc6d2 1px solid;
  height: 72rpx;
  line-height: 72rpx;
}

.hot {
  border: none;
}

.active {
  background: #de3120 !important;
  color: #fff !important;
}

.aslide-menu {
  font-size: 28rpx;
  display: flex;
  flex-direction: row;
  height: 750rpx;
  overflow: hidden;
}

.aslide-menu .aslide-box {
  height: 750rpx;
  width: 200rpx;
  background-color: #1f2638;
  text-align: center;
  color: #fff;
}

.aslide-box view {
  height: 90rpx;
  line-height: 90rpx;
}

.in {
  background: #de3120;
  border-left: 12rpx solid orange; 
}

.aslide-content{
  height: 750rpx;
  width:550rpx;
  overflow-x: hidden;
}
.aslide-item{
  
}
.aslide-item-info{
  display: flex;
  flex-direction: row;
  padding-left: 30rpx;
}
.aslide-item-title{
  height: 60rpx;
  line-height: 60rpx;
  padding-left: 30rpx;
}
.aslide-item-img image{
  width:256rpx;
  height: 170rpx;
}
.cart-add{
  width: 40rpx;
  height: 40rpx;
}
.cart-info-container{
  display: flex;
  flex-direction: column;
  width: 270rpx;
  align-items: center;
}
.red{
  color:#de3120;
  margin: 20rpx 0;
}
.food-name{
  font-weight: bold;
  font-size: 28rpx;
}
三、js页面代码如下：
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    status: 0,
    currentPosition: "order0",
    imgUrls: [
      "/images/1.jpg",
      "/images/1.jpg",
      "/images/1.jpg"
    ]
  },
  changeMenu: function (e) {
    var index = e.currentTarget.dataset.index;
    this.setData({
      status: index,
      currentPosition: "order" + index
    })
  },
  scrollBottom: function () {
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    setTimeout(function(){
      wx.hideLoading();
    },1000)
  },
  previewImages: function () {
    wx.previewImage({
      current: 'http://p1.meituan.net/460.280/deal/5cae86dd953bc50457aea6219e85287d79414.jpg@460w_280h_1e_1c',
      urls: [
        'http://p1.meituan.net/460.280/deal/5cae86dd953bc50457aea6219e85287d79414.jpg@460w_280h_1e_1c',
        'http://p1.meituan.net/460.280/deal/5cae86dd953bc50457aea6219e85287d79414.jpg@460w_280h_1e_1c',
        'http://p1.meituan.net/460.280/deal/5cae86dd953bc50457aea6219e85287d79414.jpg@460w_280h_1e_1c',
        'http://p1.meituan.net/460.280/deal/5cae86dd953bc50457aea6219e85287d79414.jpg@460w_280h_1e_1c'
      ],
    })
  }
})

模板简介：该模板名称为【微信小程序点餐系统幻灯及食物列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 20,196次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-31
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 html5 企业网站 微信图片 自适应 响应式 微信公众平台 单页式简历模板 微信素材 微信文章
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 668
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 756
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,999
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,348
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,850
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,578
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有