Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "Mini Program how to customize drop-down animation" article, so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article, let's take a look at this "Mini Program how to customize drop-down animation" article.

In Mini Program, you can customize settings to achieve drop-down menu drawing. Here is how to achieve this form:

Add filter items in pick-header, add filtered option content in pick-container, and display the real content in content.

The height of content is dynamically calculated in js according to the current phone resolution, and the height value is contentHeight, so you can nest a scroll-view in it and set the height to contentHeight to realize content sliding.

Drop-down menu example .gif

Wxml

12 3 4 5 6 7 8 9 10 11 12 13 14 15 filter pick-header view z-index:60 filter pick-container view z-index:50 I am translucent Shadow Mask view shadow z-index:40 I am content content view z-index:20

Wxss

12 34 56 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 25 26 27 29 30 31 33 34 36 37 38 39 40 41 42 43 44 46 47 48 49 50 51 53 55 56 57 58 59 60 61 63 64 65 66 68 69 70 71 72 73 * Root layout * / .content-container {width: 100% width position: absolute;} / * filter head * / .pick-header {width: 100%; height: 72rpx; z-index: 60; position: fixed Background-color: lightcoral;} / * filter container layout * / .pick-container {width: 100%; height: 300rpx; background-color: lightgoldenrodyellow; position: absolute; z-index: 50; top:-228rpx;} / * filter items hide display animation start*/@keyframes slidown {from {transform: translateY;} to {transform: translateY;} .slidown {display: block; animation: slidown 0.1s ease-in both } @ keyframes slidup {from {transform: translateY;} to {transform: translateY;}} .slidup {display: block; animation: slidup 0.2s ease-in both;} / * filter items hide shadows when animation end*/ / * filter items are displayed * / .shadow {width: 100%; background-color: rgba (1,1,1,0.2); position: absolute; z-index: 40; top: 72rpx } / * content container layout * / .content {width: 100%; position: absolute; top: 72rpx; z-index: 20;}

Js

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 25 26 27 28 29 30Page ({data: {openPicker: false, needAnimation: false, contentHeight: 0}, onLoad: function () {}, onReady: function () {var that = this Wx.getSystemInfo ({success: function (res) {that.setData ({/ / dynamically calculate the height of the content based on the resolution of the phone (total height of the screen-height of the top filter bar) contentHeight: (res.windowHeight-72 * res.screenWidth / 750)}) }})}, onPickHeaderClick: function () {this.setData ({openPicker:! this.data.openPicker, needAnimation: true})},}) the above is about "how Mini Program customizes the drop-down animation". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.