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