微信小程序制作農(nóng)產(chǎn)品商城首頁設(shè)計(jì)圖及代碼

最近制作了一個(gè)農(nóng)產(chǎn)品的小程序開發(fā)，分享一下載微信小程序制作過程，農(nóng)產(chǎn)品小程序首頁包含logo、輪播圖、產(chǎn)品列表，設(shè)計(jì)圖如下：

wxml代碼：

<van-transition show="{{navTitle}}" >
  <van-nav-bar title="村頭村尾" fixed border="{{false}}" custom-class="nav-bar" title-class="nav-var-tit" />
</van-transition>

<view class="m1">
  <view class="bg">
    <image src="/image/a1.jpg" mode="widthFix" />
  </view>
  <view class="logo" style="margin-top:{{statusBarHeight + 22 +'px'}}">
    <image src="/image/logo.png" mode="widthFix" />
  </view>

  <view class="sw">
    <swiper class="swiper" indicator-dots="true" indicator-active-color="#fff" autoplay="true" interval="3500">
      <swiper-item>
        <image src="/image/a2.jpg" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="/image/a3.jpg" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="sbg">
      <image src="/image/a4.png" mode="widthFix" />
    </view>
  </view>
</view>

<view class="m2">
  <navigator url="" hover-class="none" class="li">
    <view class="v1">
      <image src="/image/a3.jpg" mode="widthFix" />
    </view>
    <view class="v2">標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題題標(biāo)題</view>
    <view class="v3">簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介</view>
    <view class="v4">
      <view class="z"><text class="t1">￥</text>38.5<text class="t2">/1.5kg</text></view>
      <text class="y">已售 4521</text>
    </view>
  </navigator>
  <navigator url="" hover-class="none" class="li">
    <view class="v1">
      <image src="/image/a3.jpg" mode="widthFix" />
    </view>
    <view class="v2">標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題</view>
    <view class="v3">簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介</view>
    <view class="v4">
      <view class="z"><text class="t1">￥</text>38.5<text class="t2">/1.5kg</text></view>
      <text class="y">已售 4521</text>
    </view>
  </navigator>
  <navigator url="" hover-class="none" class="li">
    <view class="v1">
      <image src="/image/a3.jpg" mode="widthFix" />
    </view>
    <view class="v2">標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題</view>
    <view class="v3">簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介</view>
    <view class="v4">
      <view class="z"><text class="t1">￥</text>38.5<text class="t2">/1.5kg</text></view>
      <text class="y">已售 4521</text>
    </view>
  </navigator>
</view>

<view class="loading">
  <van-loading size="24px" color="#009e27" vertical>加載中...</van-loading>
</view>
<van-divider dashed contentPosition="center">所有數(shù)據(jù)已加載完成</van-divider>

wxss樣式代碼：

page{background:#f5f5f5;}
.m1{width:100%;height:auto;overflow: hidden;position: relative;}
.m1 .bg{position: absolute;left:0px;top:0px;width:100%;overflow: hidden;z-index: -1;}
.m1 .bg image{width: 100%;display: block;margin:0px auto;}
.m1 .logo{width:100%;height:auto;overflow:hidden;text-align: center;}
.m1 .logo image{width:160px;}
.m1 .sw{width:auto;margin:30px 15px 0px;}
.m1 .swiper{background:#fff;width:100%;border-radius:7px;height:170px;overflow:hidden;}
.m1 .swiper swiper-item{width:100%;height:100%;}
.m1 .swiper swiper-item image{width:100%;height:100%;display:block;border-radius: 7px;}
.m1 .sw .sbg{width:100%;height:10px;}
.m1 .sw .sbg image{width:100%;display: block;margin:0px auto;}

.m2{width:auto;padding:15px;overflow: hidden;}
.m2 .li{display: block;width:100%;height:auto;overflow:hidden;background:#fff;box-shadow:0px 0px 15px #eeeded;border-radius: 6px;margin-bottom: 15px;}
.m2 .li .v1{width:100%;overflow: hidden;}
.m2 .li .v1 image{width:100%;overflow: hidden;display: block;margin:0px auto;border-top-left-radius: 6px;border-top-right-radius: 6px;}
.m2 .li .v2{width:auto;margin:10px 15px 0px;font-size:18px;color:#000;font-weight: 500;}
.m2 .li .v3{width:auto;margin:5px 15px 0px;font-size:12px;color:#898989;}
.m2 .li .v4{width:auto;margin:5px 15px 8px;height:30px;line-height: 30px;}
.m2 .li .v4 .z{width:auto;float:left;font-size:24px;font-weight: bold;color:#009e27;}
.m2 .li .v4 .z .t1{font-size:14px;}
.m2 .li .v4 .z .t2{font-size:14px;font-weight: 500;}
.m2 .li .v4 .y{float:right;font-size:12px;color:#898989;}

.nav-bar{background-image:-webkit-linear-gradient(left,#2f9f20,#b6d32c) !important;}
.nav-var-tit{color:#fff !important;}