网站建设流程书籍,做旅游攻略网站好,wordpress注册页面在什么文件下载,做网上水果网站的调查最近来个需求#xff0c;要求给小程序的 modal 增加个关闭按钮#xff0c;上网一查发现原来 2018 年就有人给出解决方案了#xff0c;于是总结下微信小程序自定义组件的思路#xff1a;一句话#xff0c;用 wxml css实现和原生组件类似的样式和效果#xff0c;之后用 JS…最近来个需求要求给小程序的 modal 增加个关闭按钮上网一查发现原来 2018 年就有人给出解决方案了于是总结下微信小程序自定义组件的思路一句话用 wxml css实现和原生组件类似的样式和效果之后用 JS 实现类似原生组件的功能。 比如 modal 组件观察可以得出就是个在页面顶层显示的 mask div。modal 的显示与否可以通过 wx-if 控制需要注意的点是 modal 显示的时候要有动画效果这个功能可以通过 css animation 实现。 自定义 modal 的示例代码 WXML: view wx-if{{cusModalShow}} bindtaphandleCusModalMaskTap classcus-modalview catchtap classcus-modal__contentview classcus-modal__close-btn bindtaphandleCusModalMaskTap×/viewview classcus-modal__content-titletext提示/text/viewview classcus-modal__content-texttext请确认操作/text/viewview classcus-modal__content-buttonstext bindtaphandleCusModalCancel classcus-modal__content-button-cancel取消/texttext bindtaphandleCusModalConfirm classcus-modal__content-button-confirm确认/text/view/view /viewCSS: keyframes fade-in {0% {opacity: 0;}100% {opacity: 1;} }.cus-modal {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);animation: fade-in 0.3s ease; }.cus-modal__content {background-color: white;border-radius: 15px;width: 80%;position: relative; }.cus-modal__close-btn {color: rgb(179, 179, 179);font-size: 1.5rem;position: absolute;right: 0.5rem;top: 0.1rem; }.cus-modal__content-title, .cus-modal__content-text {font-size: 1.1rem;text-align: center; }.cus-modal__content-title {font-weight: bold;margin: 40px 0 20px 0; }.cus-modal__content-text {color: rgb(179, 179, 179);margin-bottom: 40px; }.cus-modal__content-buttons {display: flex; }.cus-modal__content-buttons {border-top: 1px solid rgb(245, 245, 245); }.cus-modal__content-buttonstext {flex: 1;text-align: center;padding: 20px 30px;border-right: 1px solid rgb(245, 245, 245);box-sizing: border-box;height: 60px; }.cus-modal__content-buttonstext:last-child {border-right: none; }.cus-modal__content-button-cancel {font-weight: bold; }.cus-modal__content-button-confirm {font-weight: bold;color: rgb(90, 117, 155); }自定义 Picker 这里实际只是模拟了原生 Picker 从底部弹入的效果具体内容可以通过放在里面的组件实现。 WXML view bindtapcloseBottomPicker wx-if{{cusPickerShow}} classcus-pickerview classcus-picker__mask/viewview catchtap classcus-picker__content!-- view classcus-picker__headertext classcus-pick__header__btn-cancel取消/texttext classcus-pick__header__btn-confirm确定/text/view --some-component bindclosehandleCarFilterClose/some-component/view /viewCSS: keyframes slide-up-from-bottom {0% {transform: translateY(100%);}100% {transform: translateY(0);} }keyframes fade-in {0% {opacity: 0;}100% {opacity: 1;} }.cus-picker {z-index: 114514;position: fixed;top: 0;left: 0;width: 100%;height: 100%; }.cus-picker__mask {position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.5);animation: fade-in 0.3s ease; }.cus-picker__content {box-sizing: border-box;position: absolute;height: 50%;width: 100%;bottom: 0;background-color: white;animation: slide-up-from-bottom 0.3s ease; }.cus-picker__header {display: flex;justify-content: space-between;padding: 20px;border-bottom: 1px solid rgb(245, 245, 245);font-size: 16px; }.cus-pick__header__btn-cancel {color: rgb(127, 127, 127); }.cus-pick__header__btn-confirm {color: rgb(0, 196, 105); }