小程式底部彈框 類似picker效果

jkbspin發表於2018-07-03

最近在遇到的一些問題以及一些解決思路。

第一次寫文章請多包涵。

起因：

小程式的<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的效果
小程式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

最後

剛開始接觸小程式，還在學習中，css部分也寫的有些亂，如果有不足的地方歡迎指出，感謝閱讀。

相關文章