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

This article mainly explains "how to achieve the damping animation effect of menu pop-up by WeChat Mini Programs". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs how to achieve the menu pop-up damping animation effect" bar!

Realize

The code structure is as follows:

Create a new component menu:

Menu.js

Var Logger = require ('.. / utils/Logger.js') Component ({properties: {menu_list: Array,}, data: {showMenu: true}, attached: function () {this.setData ({menu_list: this.data.menu_list}))} Methods: {/ / Click the new button onCreateTap: function () {this.setData ({showMenu:! this.data.showMenu})}, / / Click the expanded single button onItemTap: function (event) {var item = event.currentTarget.dataset.item / / WeChat Mini Programs sends information to the parent component through triggerEvent / / triggerEvent: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html var menuEventDetail = {item} this.triggerEvent ('handleMenu', menuEventDetail) / / menuEventOption is the option to trigger the event, including setting whether the event is bubbling or not However, the default is / / var menuEventOption = {/} / / this.triggerEvent ('handleMenu', menuEventDetail, menuEventOption)})

Refer to the lifecycle of Component in the documentation:

Set the data selection within the attached method.

TriggerEvent

View document

This.triggerEvent (eventName, eventDetail, eventOption)

EventName: event name

EventDetail: the object passed by the event, which is the content of the detail attribute in the event eventName

EventOption: mainly defines whether the eventName event should bubble or not, but the default is false, and you don't have to set it.

There is another key point: (in fact, it was automatically generated when the component was created in the first place) if you type it all-hand, remember to add the declaration of the custom component to the menu.json:

{"component": true, "usingComponents": {}}

Menu.wxml

The number of menus is based on the incoming menu_list, and the menu is controlled by showMenu.

{{item.name}}

The display of the menu, controlled by the external datas/menu-data.js

Var menu_list = [{id: 1, name: 'post', src:'/ resources/imgs/ic_create_1.png'}, {id: 2, name: 'information', src:'/ resources/imgs/ic_create_2.png'}, {id: 3, name: 'photo', src:'/ resources/imgs/ic_create_3.png'}] module.exports = {menu_list: menu_list}

Data is introduced where it is used

Use of components

Home.js

Var menuData = require ('.. /.. / datas/menu-data.js') var Logger = require ('.. /.. / utils/Logger.js') Page ({onLoad: function () {this.setData ({menu_list: menuData.menu_list,})}, onReady: function () {this.menu = this.selectComponent ("# menu") }, handleMenu: function (event) {/ / the detail here is menuEventDetail var item = event.detail.item; Logger.v ("item", item) defined in the custom component; wx.showToast ({title: 'new' + item.name,})})

Home.wxml

HOME

There is another key point: where you use it, this is home. Remember to use this component in home.json. (the quotation marks before the quotation marks are equivalent to an alias. Whatever the name is, it will be used in wxml.

Home.json

{"usingComponents": {"menu": "/ components/menu"} so far, I believe you have a deeper understanding of "how WeChat Mini Programs realizes the damping animation effect that pops up from the menu". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.