DAY08 微信小程序电商项目页面外观实现

今天做了美团外卖的首页。首先，我们编写了位置定位的地址栏。下拉功能需要自己编写，微信公众平台的官方文档未提供。然后我们要实现页面跳转，编写搜索商品的页面 ，完善搜索功能，并让综合排序这一栏也固定到顶部且紧跟着搜索框。

 

1.美团外卖首页

1.1实现方法

swiper控件应用：

首先是两页标签的滑动切换,这里使用的是swiper，它是一款小程序自带的滑块组件。swiper标签就是滑块组件的主体，表示可以滑动的区域，其中indicator-dots属性是设置设置点是否显示。接下来swiper-item标签在swiper之中表示的是每一个用来作为滑动的页面。这里用包裹着swiper-item表示的是使用categoryList对象数组中数据来循环渲染swiper-item，swiper-item的数量取决于categoryList中有多少组数据。之后在swiper-item中的block标签表示的是在一个页面中用categoryList.item中的数据循环渲染多个类似的标签，这些标签就是效果图中的类别项，总共两页，每页八个。这就是swiper和循环渲染的一些基本用法。

1.2程序代码

index.wxml

  <swiper class="categoryList" indicator-dots="true" 
  indicator-color="rgba(228,228,228,1)" 
  indicator-active-color="#FECA49">
    <block wx:for="{{categoryList}}" wx:key="">
    <swiper-item>
    <block wx:for="{{item}}" wx:key="">
      <view class="category-info">
        <image src="{{item.src}}" 
        class="category-image"></image>
        <view class="category-text">{{item.name}}</view>
      </view>
    </block>
    </swiper-item>
    </block>
  </swiper>

index.wxss

.categoryList{
  width: 100%;
  height: 350rpx;
  border-bottom:20rpx solid #f4f4f4; 
}
.category-info{
  display: inline-block;
  text-align: center;
  position: relative;
  margin-top: 20rpx;
  height: 150rpx;
  width: 25%;
}
.category-image{
  width: 95rpx;
  height: 95rpx;
}
.category-text{
  font-size: 25rpx;
  width: 100%;
  line-height: 30rpx
}

1.3程序预览

2.导航栏位置固定

2.1实现方法

弹出层的实现：

最外层的mask类的view就是一个遮罩层，用来覆盖之前的界面形成遮罩的效果，并在上面显示新的界面也就是弹出层。以上的代码就是效果图中点击筛选按钮所呈现出来的内容了。其中bindtap属性就是点击事件的绑定了，具体的点击事件需要在.js文件中设置。值得一提的是，bindtap事件是会把当前标签受到的点击冒泡给它的父容器，这就相当与同时点击了他的父容器，如果想阻止冒泡的话就需要使用catchtap。

2.2程序代码

index.js

  data: {
  
    characteristicList: [{
      text: "免配送费"
    }, {
      text: "0元起送"
    }, {
      text: "新商家"
    }, {
      text: "品牌商家"
    }, {
      text: "跨天预定"
    }],
    sortList: [{
      sort: "综合排序",
      image: "",
    }, {
      sort: "速度最快",
      image: "",
    }, {
      sort: "评分最高",
      image: "",
    }, {
      sort: "起送价最低",
      image: "",
    }, {
      sort: "配送费最低",
      image: "",
    }],
}

index.wxml

<view class="mask"
hidden="{{mask1Hidden}}" bindtap="mask1Cancel">
  <template is="sort_list" data="{{selected,sortSelected}}"/>
  <view class="overall-sort-list">
    <block wx:for="{{sortList}}" wx:key="">
    <view class="overall-sort" data-index="{{index}}" 
    bindtap="sortSelected">{{item.sort}}</view>
    </block> 
  </view>
</view>
<view class="mask"
hidden="{{mask2Hidden}}" bindtap="mask2Cancel">
  <template is="sort_list" data="{{selected,sortSelected}}"/>
  <scroll-view class="filterList" scroll-y="true" >
    <view class="filterList-characteristic-title">商家特色</view>
    <view class="filterList-characteristic-items">
      <block wx:for="{{characteristicList}}" wx:key="">
        <view class="filterList-characteristic-item {{characteristicSelected[index]==true?'characteristic-selected':''}}"
        catchtap="characteristicSelected" data-index="{{index}}">{{item.text}}</view>
      </block>
    </view>
    <view class="filterList-discount-title">优惠活动(单选)</view>
    

index.wxss

.mask{
  width:100%;
  height:100%;
  position: fixed;
  z-index:999;
  background-color:rgba(15, 15, 26, 0.7);
}

2.3程序预览