微信小程序虾蟹食品外卖列表样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="page-view" disable-scroll="true">
<!--城市 地址选择区域-->
    <view class="header-view">
        <view class="header-top">
            <view class="city-label">
                <text>{{city}}</text>
            </view>
            <view class="address-view" bindtap="chooseAddress">
                <image src="../../images/leftLocationImg.png" class="left_img"></image>
                <text>太华写字楼</text>
                <image src="../../images/locationMore.png" class="right_img"></image>
            </view>
        </view>
        <!--操作类别选择区域-->
        <view class="header-bottom">
            <block wx:for="{{foodCategorys}}" wx:key="*this">
                <view class="category-item item{{index}}" bindtap="selectSection" data-index="{{index}}">
                    <text>{{item}}</text>
                    <block wx:if="{{current_id ==index}}">
                    <view class="line"></view>
                    </block>
                </view>
            </block>
        </view>
    </view>

    <!--内容区域-->
    
    <block wx:if="{{current_id == 0}}">
        <view class="content-view hot" scroll-y="true">
            <block wx:for="{{hot_goods}}" wx:key="{{id}}" wx:for-item="good">
                <view class="hot-item">
                    <image src="{{good.pic}}" class="good-img" bindtap="showdetail" data-index="{{index}}"></image>
                    <view class="sale-view">
                        <text style="font-size:22rpx;">月销量</text>
                        <text style="font-size:18rpx;color:#ed4040;margin-left:10rpx;">{{good.sale_num}}</text>
                    </view>
                    <view class="button">
                         <text>选择规格</text>
                    </view>
                </view>
             </block>
        </view>
    </block>
    <block wx:else>
        <view class="content-view common" scroll-y="true" >
            <block wx:for="{{common_goods}}" wx:key="{{id}}" wx:for-item="good">
                <view class="common-item">
                    <image src="{{good.pic}}" class="common-img" bindtap="showdetail" data-index="{{index}}"></image>
                    <view class="common-name"><text style="margin-left:10rpx;">{{good.name}}</text></view>
                    <view class="common-sale-view">
                        <text style="font-size:22rpx;color:#7c7c7c;">月销量</text>
                        <text style="font-size:18rpx;color:#ed4040;margin-left:10rpx;">{{good.sale_num}}</text>
                    </view>
                    <text class="common-price">{{good.price}}元</text>
                    <view class="add-button">
                        <image src="../../images/foodAdd.png" style="width:40rpx;height:40rpx;"></image>
                    </view>
                </view>
             </block>
        </view>
    </block>
</view>
<!--购物车图标-->
<view class="shopcar-view" catchtap = "showshopcar">
    <image src="../../images/shopCar.png"></image>
</view>

二、wxss样式文件代码如下：

page{
    background-color: white;
    width: 750rpx;
}
.header-view{
    width: 100%;
    height: 160rpx;
    background-color: #f5f4f4;
    z-index: 500;
    position: fixed;
    top: 0;
}
.header-top{
    height: 80rpx;
}
.header-bottom{
    height: 80rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.category-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.category-item text{
    margin-top: 25rpx;
    font-size: 28rpx;
}
.category-item .line{
    width: 80rpx;
    height: 2rpx;
    background-color: #ed4040;
}
.item0{
    width: 60rpx;   
}
.city-label{
    width: 150rpx;
    height: 80rpx;
    font-size: 26rpx;
    color: #ed4040;
    text-align: center;
    padding-top: 25rpx;
}
.header-view .address-view{
    top: 15rpx;
    width: 390rpx;
    height: 50rpx;
    background-color: #191919;
    border-radius: 25rpx;
    position: absolute;
    right: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*地址显示栏*/
.address-view text{
    color: white;
    font-size: 28rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.left_img{
    width: 20rpx;
    height: 26rpx;
    position: absolute;
    left: 15rpx;
    top: 10rpx;
}
.right_img{
    width: 19rpx;
    height: 10rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
}
.content-view{
    position: absolute;
    top: 160rpx;
    display: flex;
    z-index: 100;
   
}
.hot{
    width: 100%;
    flex-direction: column;
     padding-bottom: 80rpx;
}
.common{
    padding-left: 30rpx;
    padding-right: 30rpx;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
     padding-bottom: 120rpx;
}
.hot-item{
    width: 90%;
    height: 490rpx;
    margin-top: 20rpx;
    margin-left: 5%;
    position: relative;
}
.hot-item .good-img{
    position: absolute;
    width: 100%;
    height: 410rpx;
}
.hot-item .sale-view{
    position: absolute;
    left: 0;
    bottom: 40rpx;
}
.hot-item .button{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 190rpx;
    height: 50rpx;
    background-color: #ed4040;
    color: white;
    font-size: 26rpx;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.common-item{
    width: 320rpx;
    height: 400rpx;
    margin-top: 20rpx;
    position: relative;
}
.common-img{
    width: 100%;
    height: 320rpx;
    position: absolute;
    top: 0;
}
.common-name{
    position: absolute;
    width: 100%;
    bottom: 80rpx;
    height: 60rpx;
    font: 26rpx;
    color: white;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6)
}
.common-item .common-sale-view{
    position: absolute;
    left: 0;
    bottom: 40rpx;
}
.common-item .common-price{
    font-size: 28rpx;
    position: absolute;
    bottom: 5rpx;
}
.add-button{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.shopcar-view{
    position: fixed;
    bottom: 5rpx;
    left: 30rpx;
    z-index: 1000;
}
.shopcar-view image{
    width: 110rpx;
    height: 110rpx;
}

三、js页面代码如下：

const app = getApp()
let height = 0
Page({
  data:{
    foodCategorys:["虾蟹","特色美食","预订商品","主食酒水"],
    current_id:0,
    city:'北京市',
    screenHeight:parseInt(app.globalData.height) * 2,
    hot_goods:[
      {
        "name":"麻辣龙虾尾",
        "price":"89",
        "id":0,
        "pic":"../../images/MNX.png",
        "sale_num":99
      },
      {
        "name":"嗨麻嗨辣小龙虾",
        "price":"89",
        "id":1,
        "pic":"../../images/MX.png",
        "sale_num":99
      },
      {
        "name":"麻辣小龙虾",
        "price":"89",
        "id":2,
        "pic":"../../images/MXJP.png",
        "sale_num":99
      },
    ],
    common_goods:[
      {
        "name":"麻辣豆皮",
        "price":"89",
        "id":0,
       "pic":"http://123.56.182.28/images/201604/1460351377410581585.jpg",
        "sale_num":99
      },
      {
        "name":"麻辣海白菜",
        "price":"89",
        "id":1,
        "pic":"http://123.56.182.28/images/201604/1460351328442917106.jpg",
        "sale_num":99
      },
      {
        "name":"微辣兔头",
        "price":"89",
        "id":2,
        "pic":"http://123.56.182.28/images/201604/1460351296256062421.jpg",
        "sale_num":99
      },
      {
        "name":"微辣鸭舌",
        "price":"89",
        "id":3,
        "pic":"http://123.56.182.28/images/201604/1460351255750519007.jpg",
        "sale_num":99
      },
      {
        "name":"麻辣牛蹄筋",
        "price":"89",
        "id":4,
        "pic":"http://123.56.182.28/images/201604/1460351205527158641.jpg",
        "sale_num":99
      },
      {
        "name":"麻辣小竹笋",
        "price":"89",
        "id":5,
        "pic":"http://123.56.182.28/images/201604/1460351146788043235.jpg",
        "sale_num":99
      }
    ]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    let res = wx.getSystemInfoSync()
    height = res.windowHeight
    console.log("app" + app.globalData.height)
  },
  onReady:function(){
    // 页面渲染完成
     console.log(app.objcToString(this.data.hot_goods[0])) 
  },
  onShow:function(){
    // 页面显示
    
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  },
  selectSection:function(event){
    console.log(event)
      let index = parseInt(event.currentTarget.dataset.index);
      this.setData({current_id:index})
  },
  showdetail:function(event){
      let good = {}
      let index = parseInt(event.currentTarget.dataset.index)
      if(this.data.current_id == 0){
        good = this.data.hot_goods[index]
      }else{
        good = this.data.common_goods[index]
        console.log(good);
      }
      let params = app.objcToString(good)
      console.log("点击了" + params)
      wx.navigateTo({
        url: '../shopdetail/shopdetail?' + params,
        success: function(res){
          // success
        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
        }
      })
  },
  onShareAppMessage: function () {
    return {
      title: '麻小外卖',
      desc: '小程序分享测试',
      path: '/pages/index/index'
    }
  },
  chooseAddress:function(){
    wx.navigateTo({
      url: '../addAddress/addAddress',
      success: function(res){
      },
      fail: function() {
      }
    })
  },
  // 跳转到购物车界面
  showshopcar:function(){
    wx.navigateTo({
         url: '../buycar/buycar'
       })
  }
})

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