ios端小程序打开弹框边上有白色空白缝隙小程序底部弹出

转载

angel 2024-01-10 23:09:45

最近在遇到的一些问题以及一些解决思路。

第一次写文章请多包涵。

起因：

小程序的<picker>组件是类似html中的一个单项选择器。我们要实现一个长得像picker组件的多项选择器。

思路

picker组件是底部弹出的一个菜单，有一个背景由浅慢慢变深的一个过程。翻了翻网上的方法都是用的小程序自带的动画效果做的，但是基本都没看到做背景的渐变效果，所以还是要自己解决一下问题。查看小程序开发文档看到有wx.createAnimation()这个创建动画的api。背景的渐变效果考虑使用css的transition。多选这个功能考虑修改checkbox的默认样式来解决。

过程

首先要实现一个底部弹出的效果。页面：

<!-- 一个触发底部弹框的元素 -->
 <botton bindtap="showModel">show</botton>
 <!-- 渐深的背景层 -->
 <view class='{{bg}}' style="visibility:{{backgroundVisible ? 'visible':'hidden'}}"></view>
 <!-- 底部弹出层 -->
 <view class="element-wrapper" animation="{{animation}}" style="visibility:{{show ? 'visible':'hidden'}}">
    <view class="element">
        <view class='picker_header'>
            <text class="left-bt" catchtap="hidden" >取消</text>
            <text class="right-bt" catchtap="hidden">确定</text>
        </view>
        {内容}
    </view>
 </view>
复制代码

js：

var action = '';
var moveY = 200;
var animation = animation = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: 400,
    timingFunction: "ease",
    delay: 0
})
animation.translateY(moveY + 'vh').step();
Page({
    data: {
        show: false,
        backgroundVisible: false,
        animation: animation,
        bg: 'background',
    },
    onLoad: function(options) {},
    onReady: function() {},
    //移动按钮点击事件
    showModel: function(e) {
        moveY = 0;
        action = 'show';
        animationEvents(this, moveY, action);
    },
    //隐藏弹窗浮层
    hidden(e) {
        moveY = 200;
        action = 'hide';
        animationEvents(this, moveY, action);
    }
})
//动画事件 底部的弹出，背景层通过切换不同的class，添加一个transition的效果，使之有一个渐变的感觉。
function animationEvents(that, moveY, action) {
  that.animation = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: 400,
    timingFunction: "ease",
    delay: 0
  })
  that.animation.translateY(moveY + 'vh').step()
  if (action == 'show') {
    that.setData({
      animation: that.animation.export(),
      show: true,
      backgroundVisible: true,
      bg: 'bg',
      disableScroll: 'disableScroll'
    });
  } else if (action == 'hide') {
    that.setData({
      animation: that.animation.export(),
      show: false,
      backgroundVisible: false,
      bg: 'background',
      disableScroll: ''
    });
  }
}
复制代码

样式部分:

.element-wrapper {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.background {
  background-color: rgba(0, 0, 0, 0);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
}

.bg {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  transition-property: background-color;
  transition-timing-function: ease;
  transition-duration: 1s;
  transition-delay: 0;
}

.element {
  position: fixed;
  width: 100%;
  height: 45vh;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}
.element text {
  color: #999;
  display: inline-flex;
  position: fixed;
  margin-top: 20rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 34rpx;
}
.element .left-bt {
  left: 5%;
  font-size: 34rpx;
  color: #888;
  line-height: 34rpx;
}

.element .right-bt {
  right: 5%;
  font-size: 34rpx;
  color: #888;
  text-align: right;
  line-height: 34rpx;
}

.element .line {
  display: block;
  position: fixed;
  height: 1px;
  width: 100%;
  margin-top: 89rpx;
  background-color: #eee;
}
复制代码

效果

小程序picker的效果

其他：

点击后面的灰色隐藏菜单，可以在弹出层的上面加一块透明的东西撑起上面剩余的部分，如果只在这里加背景灰色，取消后面的背景渐变层，会导致弹出层的效果是灰+白的一块东西从底部升起。打不到想要的效果。弹出层下面用scroll-view会导致穿透。可以给根节点加个样式解决问题。

top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
复制代码

下面的复选可以用checkbox来实现，小程序的checkbox可以修改默认的样式默认样式checkbox .wx-checkbox-input 选中的样式checkbox .wx-checkbox-input.wx-checkbox-input-checked 对勾的样式checkbox .wx-checkbox-input.wx-checkbox-input-checked::before