微信小程序在線點餐外賣系統 畢業設計 課程設計（1）首頁

wxml代碼

<!--輪播：遠程數據（圖片地址+連接地址）【對象數組，數組中的每個元素包含圖片地址+鏈接地址】-->
<view ><!--swiper屬性裏面的設置相比上面，多了個if判斷是否顯示，jieguo=true; jieguo2=false-->
<!--遠程數據地址：http://www.yaoyiwangluo.com/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 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條信息-->
<!--遠程地址：http://www.yaoyiwangluo.com/wx_news_list.asp 【對象數組】-->
<block wx:for="{{xinxis}}" wx:key="{{item.myid}}">
  <navigator url='/pages/gongyong/xinxi_info?cs_xxid={{item.myid}}' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</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-->

  <!--遠程數據（對象數組）：http://www.yaoyiwangluo.com/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-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>
      <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;
  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;
  padding: 3px;
  color: red;
}

.zuixin-jiage2 {
  font-size: 11px;
  padding: 3px;
  color: gray;
}

/*銷售排行*/

.paihang-item {
  display: flex;
  padding: 5px;
  width: 100%;
}

.paihang-tupian {
  width: 25%;
}

.paihang-img {
  width: 100%;
  border: 1px solid gainsboro;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
}

.paihang-xinxi {
  width: 75%;
  margin-left: 5px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.paihang-mingcheng {
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.paihang-jianjie {
  font-size: 11px;
  color: gray;
  margin: 3px 0;
}

.paihang-xuhao {
  color: green;
  font-size: 13px;
}

.paihang-xiaoshou {
  font-size: 11px;
  color: gray;
}

.paihang-jiage0 {
  font-size: 10px;
  color: red;
}

.paihang-jiage1 {
  font-size: 13px;
  color: red;
}