zoukankan      html  css  js  c++  java
  • 微信小程序下拉动画

    wxml

    <view class="content-container">
      <view class="pick-header" bindtap="onPickHeaderClick">
        筛选pick-header view z-index:60
      </view>
    
      <view class="pick-container {{needAnimation ? (openPicker ? 'slidown' : 'slidup') : ''}}">
        筛选项 pick-container view z-index:50
      </view>
    </view>

    wxss

    .content-container {
     100%;
    position: absolute;
    }
    
    /*筛选头部*/
    .pick-header {
       100%;
      height: 72rpx;
      z-index: 60;
      position: fixed;
     background-color: lightcoral;
    }
    
    /*筛选项容器布局*/
    .pick-container {
       100%;
      height: 300rpx;
      background-color: lightgoldenrodyellow;
      position: absolute;
      z-index: 50;
      top: -228rpx;
    }
    
    /*筛选项隐藏 显示动画 start*/
    @keyframes slidown {
      from {
        transform: translateY(0%);
      }
    
      to {
        transform: translateY(100%);
      }
    }
    
    .slidown {
      display: block;
      animation: slidown 0.1s ease-in both;
    }
    
    @keyframes slidup {
      from {
        transform: translateY(100%);
      }
    
      to {
        transform: translateY(0%);
      }
    }
    
    .slidup {
      display: block;
      animation: slidup 0.2s ease-in both;
    }
    /*筛选项隐藏 显示动画 end*/

    js

    Page({
      data: {
        openPicker: false,
        needAnimation: false,
        contentHeight: 0
      },
    
      onLoad: function () {
    
      },
      onPickHeaderClick: function () {
        this.setData({
          openPicker: !this.data.openPicker,
          needAnimation: true
        })
      },
    })
  • 相关阅读:
    C语言 · 最大最小值
    C语言 · 三个整数的排序
    C语言 · 简单加法
    C语言 · FJ的字符串
    C语言 · 分解质因数
    C语言 · 数的统计
    C语言 · 成绩的等级输出
    C语言 · 区间K大数查询
    shell学习目录
    数据库学习目录
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/9261696.html
Copyright © 2011-2022 走看看