欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2024-01-15 22:22:28
...

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

  • 先上效果图
    饿了么仿制过程中遇到的问题以及其解决方案
实现思路
  • 使用三层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">d</view>
        <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">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
        </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">dddddddddddddddddddddddddddddddddddddddddd</view>
            <view class="achievement"></view>
            <view class="price-spec">
              <view class="price">￥10</view>
              <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
      });
    }
  },
相关标签： 小程序 前端

上一篇： 生成.tflite文件过程中遇到的问题及解决方案

下一篇： Anaconda过程中遇到的CondaMultiError，CondaHTTPError和PermissionError问题及解决方案

推荐阅读