饿了么仿制过程中遇到的问题以及其解决方案

问题一：自定义弹出层问题

• 先上效果图
  

实现思路

• 使用三层view
• 主体
• 透明层
• 弹出层
• 使用z-index控制层级
• 使用position进行定位

wxml代码截图：

wxss代码截图：

问题二：弹出层弹出后，禁止主体层滚动

• 在弹出层最外层添加属性catchtouchmove=’preventTouchMove’
• 在背景层最外层添加属性catchtouchmove=’preventTouchMove’
• 在js中添加函数preventTouchMove: function (e) {}

问题三：flex与white-space冲突问题

• 问题解决前的版式：
• wxml代码：

<view class="container">
    <scroll-view class="classify-container">
      <view class="classify-item">
        <view class="classify-logo">dview>
        <view class="classify-name">热销view>
      view>
      <view class="classify-item">
        <view class="classify-logo">●view>
        <view class="classify-name">热销view>
      view>
      <view class="classify-item">
        <view class="classify-logo">●view>
        <view class="classify-name">热销view>
      view>
    scroll-view>
    <scroll-view class="foods-container">
      <view class="foods">
        <view class="foods-classify">
          <view class="classify-name">热销view>
          <view class="classify-desc ellipsis">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxview>
        view>
        <view class="foods-item">
          <view class="food-image">
            <image src="/image/index/classify.jpeg" mode="widthFix">image>
          view>
          <view class="food-detail">
            <view class="food-name">view>
            <view class="food-desc ellipsis">ddddddddddddddddddddddddddddddddddddddddddview>
            <view class="achievement">view>
            <view class="price-spec">
              <view class="price">￥10view>
              <view class="spec">选规格view>
            view>
          view>
        view>
      view>
    scroll-view>
  view>

• wxss代码：

.container {
  display: flex;
}

.classify-container {
  width: 20%;
  background-color: blue;
}

.classify-container .classify-item {
  padding: 15px 5px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #000;
}

.foods-container {
  width: 80%;
  background-color: red;
}

.foods-container .foods{
  width: 100%;
  margin: 10px;
}

.foods-container .foods .foods-classify {
  width: 100%;
  display: flex;
}

.foods-container .foods .foods-classify .classify-name {
  width: 40px;
}

.foods-container .foods .foods-classify .classify-desc {
  width: 100%;
}

.foods-container .foods .foods-item {
  width: 100%;
  display: flex; 
  background-color: green; 
}

.foods-container .foods .foods-item .food-image image {
  width: 80px;
  height: 80px;
}

.foods-container .foods .foods-item .food-detail {
  width: 100%;
}

.foods-container .foods .foods-item .food-detail .food-desc {
  width: 330rpx;
}

.foods-container .foods .foods-item .food-detail .price-spec {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.price {
  font-size: 14px;
}

.spec {
  padding: 3px 10px;
  color: #fff;
  font-size: 8px;
  font-weight: bold;
  border-radius: 10px/50%;
  background-color: blue;
}

• 界面截图：
• 
• 出现元素超出屏幕的现象，经过排查，发现下面样式设置的宽度值有问题，该为max-width:100%;即可
  

问题四：弹出框缓出缓入效果

效果图：

解决方案：

• 使用wx.createAnimation()创建动画效果
• 在wxml页面需要创建动画的元素中添加animation属性

<view class="discount-dialog" hidden="{{discount_dialog_hidde}}" catchtouchmove="preventTouchMove">
    <view class="discount-dialog-mask" bindtap="hideDiscountDialog">view>
    <view class="discount-dialog-model" animation="{{animationData}}">
      <view class="title">
        <view class="fill">view>
        <view class="text">优惠活动view>
        <view class="cancel" bindtap="hideDiscountDialog"><image src="/image/cancel.png">image>view>
      view>
      <scroll-view class="content" scroll-y="true" scroll-left="100">
        <view class="content-item">
          <image src="/image/discount/sub.png">image>满20减10，满40减15，满60减30
        view>
        <view class="content-item">
          <image src="/image/discount/sub.png">image>满20减10，满40减15，满60减30
        view>
        <view class="content-item">
          <image src="/image/discount/sub.png">image>满20减10，满40减15，满60减30
        view>
      scroll-view>
    view>
  view>

• 在wxss中设置样式,可参考问题一和问题二来设置
  下面给出参考样式

.discount-dialog {
  z-index: 234;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.discount-dialog .discount-dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.discount-dialog .discount-dialog-model {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
}

.discount-dialog .discount-dialog-model .title {
  display: flex;
  justify-content: space-between;
  margin: 15px;
}

.discount-dialog .discount-dialog-model .title .fill {
  flex-grow: 0; 
}

.discount-dialog .discount-dialog-model .title .text {
  flex-grow: 2; 
  text-align: center;
  color: #373737;
  font-weight: 680;
  font-size: 18px;
}

.discount-dialog .discount-dialog-model .title .cancel {
  flex-grow: 0;
}

.discount-dialog .discount-dialog-model image {
  width: 16px;
  height: 16px;
}

.discount-dialog .discount-dialog-model .content {
  padding-left: 20px;
  font-size: 14px;
  margin-bottom: 30px;
  height: 135px; /*因为使用scroll-view,要想使scroll-view生效，必须给它一个固定高度*/
}

.discount-dialog .discount-dialog-model .content .content-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; 
}

• 在js中绑定动画事件，使用wx.createAnimation()

 //缓入效果
 showDiscountDialog: function () {
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(animationShowHeight).step()
    this.setData({
      animationData: animation.export(),
      discount_dialog_hidde: false,
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  // 缓出效果
  hideDiscountDialog: function () {
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation;
    animation.translateY(animationShowHeight).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        discount_dialog_hidde: true,
      })
    }.bind(this), 200)
  },

问题五：分类侧栏的实现

效果图：

• scroll-view组件的应用
• 坑点在于：样式中必须添加

page {
  height: 100%; /*添加这个后，scroll-view将以整个页面的高度为基准*/
  overflow: hidden;
}

• wxml代码
  
• wxss代码（只给主要的，详细代码可去github下载）

page {
  height: 100%;
  overflow: hidden;
}
.main {
  color: #000;
  height: 100%;
  background-color: #fff;   
}
.main .header {
  transition: all 0.5s ease-in-out; /*当元素变化时的淡入淡出效果*/
}
.main .hidden {
  margin-top: -270px;
}
.container {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 85px;
}
.classify-container {
  width: 20%;
  height: 100%;
  background-color: #EBEFF2;
}
.foods-container {
  width: 80%;
  height: 100%;
  background-color: #fff;
}

• js代码

onGoodsScroll: function (e) {
    if (e.detail.scrollTop > 20 && !this.data.scrollDown) { // 隐藏顶部元素
      this.setData({
        scrollDown: true
      });
    } else if (e.detail.scrollTop < 20 && this.data.scrollDown) { // 显示顶部元素
      this.setData({
        scrollDown: false
      });
    }
  },