实习日志Day 9

今天学习了美团外卖小程序的实现，根据美团外卖首页去为自己的小程序进行修改，主要是针对美团首页的一些功能进行修改。我觉得现在对于样式方面自己是没问题了，就算花多一点时间也可以是做出一个很好看的页面，但是对于功能方面还是欠缺了一点，所以在这方面得加强。

对于昨天说的背景图的做法是对的（把内容都框在一个上下滚动的scroll-view里面）

下面是最后截图

          

今天完成的部分：

wxml

<!-- 滚动的区域 -->
<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun">
  
  <!-- location -->
  <view class='locat'>
    <image src="../../icons/location.png" style="width:30rpx;height:30rpx;"></image>
    <text>广东海洋大学 ></text>
  </view>

  <!-- 搜索 -->
<view class="scout {{top>=20? 'fixed' :'' }}" bindtap="newpage">
  <image class='img' src='../../icons/icon.png'></image>
  <input class='ipt' placeholder='请输入商家或商品名称' placeholder-class='place' disabled="true"></input>
</view>

<!-- swiper -->
<swiper indicator-dots="true">
    <swiper-item >
      <view class="zha">
        <view class="z1">
          <image src="../../img/meishi.gif" style="width:80rpx;height:80rpx;"></image>
          <view>美食</view>
        </view>
        <view class="z1">
          <image src="../../img/chaoshi.gif" style="width:80rpx;height:80rpx;"></image>
          <view>超市便利</view>
        </view>
        <view class="z1">
          <image src="../../img/jiachang.gif" style="width:80rpx;height:80rpx;"></image>
          <view>家常菜</view>
        </view>
        <view class="z1">
          <image src="../../img/jianmian.gif" style="width:80rpx;height:80rpx;"></image>
          <view>减免配送费</view>
        </view>
        <view class="z1">
          <image src="../../img/yinping.gif" style="width:80rpx;height:80rpx;"></image>
          <view>甜点饮品</view>
        </view>
        <view class="z1">
          <image src="../../img/xianhua.gif" style="width:80rpx;height:80rpx;"></image>
          <view>浪漫鲜花</view>
        </view>
        <view class="z1">
          <image src="../../img/zaocan.gif" style="width:80rpx;height:80rpx;"></image>
          <view>早餐</view>
        </view>
        <view class="z1">
          <image src="../../img/all.gif" style="width:80rpx;height:80rpx;"></image>
          <view>全部分类</view>
        </view>
      </view>
    </swiper-item>
    <swiper-item style="background:rgba(0,0,255,.3)">
    </swiper-item>
</swiper>
<swiper indicator-dots="true" style='width:100%;height:250rpx;padding:20rpx 0;box-sizing: border-box;  '>
    <swiper-item >
      <image src="../../img/1.png" style="width:100%;height:100%;"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../img/2.png" style="width:100%;height:100%;"></image>
    </swiper-item>
</swiper>

<view class='vie'>附近商家</view>
<!-- 综合排序 -->
<view class="sort {{top>=264? 'fixed1' :''}}">
  <view bindtap='click'>
    {{show}}
    <view class='sj'></view>
  </view>
  <view>销量高</view>
  <view>速度快</view>
  <view>减配送费</view>
  <view>筛选</view>
  <!-- select -->
  <view class='select' wx:if="{{flag}}">
    <!-- option -->
    <view wx:for="{{arr}}" bindtap='showtext' wx:key="{{index}}" data-key="{{index}}">{{item}}</view>
  </view>
</view>
<image src="../../img/8.jpg" style="width:100%;height:75%;"></image>
<image src="../../img/6.jpg" style="width:100%;height:75%;"></image>
<image src="../../img/4.jpg" style="width:100%;height:75%;"></image>
<!-- 删除 -->
<!-- <view class="ul">
  <view class='li' wx:for="{{arr}}">
    {{item}}
    <view class="del">删除</view>
  </view>
</view> -->

</scroll-view>

最后结果：