⼩程序在线点餐外卖系统毕业设计课程设计（1）⾸页
wxml代码
<!--轮播：远程数据（图⽚地址+连接地址）【对象数组，数组中的每个元素包含图⽚地址+链接地址】-->
<view ><!--swiper属性⾥⾯的设置相⽐上⾯，多了个if判断是否显⽰，jieguo=true; jieguo2=false-->
<!--远程数据地址：www.yaoyiwangluo/wxshop/100-lunbotupian-link.html 模拟数据-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" wx:if="{{jieguo}}">
<block wx:for="{{images2}}" wx:key="a002" style='height:120px;'>
<!--给每个swiper-item外围添加了链接-->
<navigator url='{{item.dizhi}}'>
<swiper-item>
<image src="{{item.tupian}}" class="slide-image2"/>
</swiper-item>
</navigator>
</block>
</swiper>
</view>
<!--快捷菜单-->
<view class='menu'>
<navigator url='/pages/gongyong/chanpin_list' class='menu-item'>
<image src='/img/menu01.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>所有菜品</text>
</navigator>
<navigator url='/pages/fenlei/index' open-type="switchTab" class='menu-item'>
<image src='/img/menu02.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>我要点餐</text>
</navigator>
</navigator>
<navigator url='/pages/gongyong/xinxi_list?cs_lxid=236' class='menu-item'>
<image src='/img/menu06.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>活动列表</text>
</navigator>
<navigator url='/pages/guanyu/fangkui' class='menu-item'>
<image src='/img/menu05.png' mode='widthFix' class='menu-img'></image>
<text class='menu-mc'>留⾔反馈</text>
</navigator>
</view>
<!--获取web⽹站后台发布的最新3条信息-->
<!--远程地址：www.yaoyiwangluo/wx_news_list.asp 【对象数组】-->
<block wx:for="{{xinxis}}" wx:key="{{id}}">
<navigator url='/pages/gongyong/xinxi_info?cs_xxid={{id}}' class='xinxi'>
<image class='xinxi-icon' src='/img/news.png'></image>
<text class='xinxi-text'>{{shijian}}{{biaoti}}</text>
<image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
</block>
<!--区块标题-最新上架产品；更多链接到所有产品页⾯-->
<view class='qukuai'>
<view class='y01'></view>
<text class='t01'>最新上架菜品</text>
<navigator url="/pages/gongyong/chanpin_list" class='m01'>更多></navigator>
</view>
<view class='zuixin'>
<!--navigator url='' class='zuixin-item'>
<image src='/tupian/cp01.jpg' mode='widthFix' class='zuixin-img'></image>
<text class='zuixin-mc'>产品名称0123456789788111aaaa</text>
<view>
<text class='zuixin-jiage0'>¥</text>
<text class='zuixin-jiage1'>188.00</text>
<text class='zuixin-jiage2'>456⼈付款</text>
</view>
</navigator>
<navigator url='' class='zuixin-item'>
<image src='/tupian/cp02.jpg' mode='widthFix' class='zuixin-img'></image>
<text class='zuixin-mc'>产品名称2</text>
<view>
<text class='zuixin-jiage0'>¥</text>
<text class='zuixin-jiage1'>166.00</text>
<text class='zuixin-jiage2'>536⼈付款</text>
</view>
</navigator-->
<!--远程数据（对象数组）：www.yaoyiwangluo/wx_CpList_top4.asp-->
<!--获取的远程数据赋值给数组变量：zuixins；然后循环显⽰该数组的内容-->
<block wx:for="{{zuixins}}" wx:key="{{item.cp_id}}">
<!--每个产品会链接到详细页⾯，需要的参数：产品id+产品名称-->
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'> <image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image>
<text class='zuixin-mc'>{{item.cp_mingcheng}}</text>
<view>
<text class='zuixin-jiage0'>价格：¥</text>
<text class='zuixin-jiage1'>{{item.jiage}}</text>
<text class='zuixin-jiage1'>{{item.jiage}}</text>
<text class='zuixin-jiage2'></text>
</view>
</navigator>
</block>
</view>
<!--销售排⾏-->
<view class='qukuai'>
<view class='y01'></view>
<text class='t01'>菜品排⾏</text>
<navigator url="/pages/gongyong/chanpin_list" class='m01'>更多></navigator>
</view>
<!--navigator url='' class='paihang-item'>
<view class='paihang-tupian'>
<image class='paihang-img' src='/tupian/cp01.jpg' mode='widthFix'></image>
</view>
<view class='paihang-xinxi'>
<text class='paihang-mingcheng'>产品名称</text>
<text class='paihang-jianjie'>产品简介</text>
<view>
<text class='paihang-xuhao'>No.1</text>
<text class='paihang-xiaoshou'>|456⼈付款|</text>
<text class='paihang-jiage0'> ¥</text>
<text class='paihang-jiage1'>188.00</text>
</view>
</view>
</navigator-->
<block wx:for="{{zuixins}}" wx:key="key">
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'> <view class='paihang-tupian'>
<image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image>
</view>
<view class='paihang-xinxi'>
<text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text>
<text class='paihang-jianjie'>{{item.jianjie}}</text>
<view>
<text class='paihang-xuhao'>No.{{index+1}}</text>
box sizing<text class='paihang-xiaoshou'>|已销{{item.yixiaoshou}}件|</text>
<text class='paihang-jiage0'> ¥</text>
<text class='paihang-jiage1'>{{item.jiage}}</text>
</view>
</view>
</navigator>
</block>
wxss代码
/*⼴告图样式*/
.ad01 {
box-shadow:0px 2px 2px gainsboro;/*阴影*/
margin:2px;/*外边距*/
}
.ad01-img {
width:100%;
}
/*轮播图样式*/
.
slide-image {
height:120px;
height:120px;
width:100%;
display: inline-block;
overflow: hidden;
}
.slide-image2 {
height:100%;
width:100%;
display: inline-block;
overflow: hidden;
}
/*快捷菜单*/
.menu {
display: flex;
flex-wrap: wrap;/*换⾏*/
border-bottom:1px solid gainsboro;/*菜单最下⾯线条*/ }
.menu-item {
width:25%;/*1⾏4个菜单*/
padding:5px;/*内边距*/
box-sizing: border-box;
display: flex;
justify-content: center;/*左右居中*/
flex-direction: column;/*从上到下*/
}
.menu-img {
width:66%;
align-self: center;
}
.menu-mc {
font-size:14px;
align-self: center;
}
.xinxi {
display: flex;
align-items: center;
padding:5px;
border-bottom:1px solid #f2f2f2;
}
.xinxi-icon {
width:22px;
height:22px;
}
.
xinxi-text {
flex-grow:1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.xinxi-arrow {
width:13px;
height:13px;
}
/*区块标题*/
.
qukuai {
display: flex;
background-color: aliceblue;
align-items: center;
}
.y01 {
width:3px;
height:18px;
background-color: green;
margin:5px;
box-shadow:2px 2px 2px gainsboro; }
.
t01 {
color: gray;
flex-grow:1;
text-shadow:1px 1px 1px gainsboro; }
.m01 {
color: gray;
margin-right:5px;
text-shadow:2px 2px 2px gainsboro; }
.zuixin {
display: flex;
flex-wrap: wrap;
}
.zuixin-item {
width:50%;
display: flex;
flex-direction: column;
padding:5px;
box-sizing: border-box;
border-bottom:1px dotted gainsboro; }
.zuixin-img {
width:100%;
border:1px solid #fcfafa;
border-radius:5px;
box-shadow:0px 2px 2px gainsboro; padding:5px;
box-sizing: border-box;
}
.zuixin-mc {
font-size:12px;
padding:3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.
zuixin-jiage0 {
font-size:10px;
padding:3px;
color: red;
}
.zuixin-jiage1 {
font-size:14px;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论