pp电子

登录
免费开通
产品中心
更多服务

小程序自界说下拉动画的实现方式

—— 2018 ——
01/17
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2018/1/17 0:00:00 泉源：不详 作者：未知

　　小程序中可以自界说设置实现下拉菜单发动画，， ，，下面是实现这种形式的要领：

　　在pick-header里添加筛选项，， ，，在pick-container添加被筛选的选项内容，， ，，content里显示真正的内容。。。。。

　　content的高度是会在js里凭证目今手机分辨率所动态盘算的，， ，，高度值为contentHeight，， ，，以是在内里可以嵌套一个scroll-view，， ，，设置高度为contentHeight即可实现内容滑动。。。。。

　　好了，， ，，空话未几说，， ，，直接看图附代码。。。。。


下拉菜单示例.gif

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 class="shadow" style="height:{{contentHeight}}px;line-height:{{contentHeight}}px" hidden="  {{!openPicker}}">我是半透明阴影遮罩 view shadow  z-index:40</view>
 
  <view class="content" style="height:{{contentHeight}}px">
    我是内容content view z-index:20
  </view>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*根结构*/
.content-container {
width: 100%;
position: absolute;
}
 
/*筛选头部*/
.pick-header {
  width: 100%;
  height: 72rpx;
  z-index: 60;
  position: fixed;
 background-color: lightcoral;
}
 
/*筛选项容器结构*/
.pick-container {
  width: 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*/
 
/*筛选项显示出来的时间的阴影*/
.shadow {
  width: 100%;
  background-color: rgba(1, 1, 1, 0.2);
  position: absolute;
  z-index: 40;
  top: 72rpx;
}
 
/*内容容器结构*/
.content {
  width: 100%;
  position: absolute;
  top: 72rpx;
  z-index: 20;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Page({
data: {
    openPicker: false,
    needAnimation : false,
    contentHeight: 0
},
 
onLoad: function () {
 
},
 
onReady: function () {
    var that = this;
    wx.getSystemInfo({
        success: function (res) {
            that.setData({
                //动态凭证手机分辨率来盘算内容的高度（屏幕总高度-顶部筛选栏的高度）
                contentHeight: (res.windowHeight - 72 * res.screenWidth / 750)
            });
        }
    })
},
 
onPickHeaderClick: function () {
    this.setData({
        openPicker: !this.data.openPicker,
        needAnimation : true
    })
  },
})

 

　　以上就是实现微信小程序下拉菜单(发动画)的要领实例的详细内容，， ，，希望可以资助到到各人。。。。。


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，， ，，由于未联系到知识产权人或未发明有关知识产权的挂号，， ，，若有知识产权人并不肯意我们使用，， ，，若是有侵权请连忙联系。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，， ，，仅系客观性形貌，， ，，如您需要相识该类商品/服务详细的资讯，， ，，请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，， ，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异，， ，，提供产品和服务，， ，，助力企业向数字化转型，， ，，通过科技驱动商业刷新，， ，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序
上/下篇

  • 蘑菇街小程序电商直播小程序系统开发案例

    pp电子最新新闻，， ，，蘑菇街自去年7月21日上线直播板块，， ，，一个月内人均播映次数已提升了40%，， ，，人均播映时长提升了100%。。。。。顺畅的边看边买体会，， ，，显着也给高转化做出了孝顺。。。。。 蘑菇街的直播是...

    社交电商小程序电商电商小程序电商直播微商 2018/1/17 0:00:00

  • 社交立减金接口那里设置（非支付渠道）

    小程序社交立减金功效实现了商家快速获取社交、裂变撒播属性。。。。。那么在谋划小程序时怎样开放社交立减金接口呢。。。。。...

    营销工具运营SaaS 2018/1/17 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
小程序自界说下拉动画的实现方式 - KESION pp电子