微信小程序,模仿 Android 底部弹出的 Bottom Sheet 样式控件效果
在需要弹出的 page 页面
// xx_page.js
const BottomSheetBehavior = require('../../template/bottomSheetBehavior/bottomSheetBehavior')
const bottom_sheet = new BottomSheetBehavior()
Page({
...
onShowCallback: function() {
// 单位为 rpx
bottom_sheet.show(500)
// 同样,支持简单的滑动消失效果
// bottom_sheet.show(500, true)
},
onDismissCallback: function() {
bottom_sheet.dismiss()
}
})
// xx_page.wxml
<import src="../../template/bottomSheetBehavior/bottomSheetBehavior.wxml"/>
<!-- your ml layout content -->
// _bottom_sheet_state 这个命名不能改动
<template is="bottom-sheet-behavior" data="{{_bottom_sheet_state}}"></template>
// xx_page.wxss
@import "../../template/bottomSheetBehavior/bottomSheetBehavior.wxss";
<!-- your style sheet -->
- 支持 Initial Height , Swipe Up to Peek Height , 更接近 Android 效果
- 优化 Scroll Animation
- 优化 Mask View Show / Dismiss Animation
Copyright 2017 lynn
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.