想法
不想使用第三方的小程序UI组件，理由是因为第三方组件是所有常见组件的集合，css样式代码过于庞大，虽然说是轻量级的组件，但是对于小程序来说，依旧很庞大。并且在一个小程序中也不一定用到所有的组件，却是引入全部的css代码。
所以我想将每一个组件单独剥离出来，当使用到某一个组件的时候，就引入对应的组件和样式即可。
效果图
所以我想将每一个组件单独剥离出来，当使用到某一个组件的时候，就引入对应的组件和样式即可。
这个组件分为两个部分：
- 阴影部分
- 底部内容部分
当我们点击“弹出”按钮或者触发弹出事件的时候，阴影和底部内容块一起从bottom弹出，弹出的快慢可在css中设置。
阴影部分：
<!-- 阴影 -->
<view class="yd_overlay {{show?'yd_show_overlay':'yd_close_overlay'}} yd_popup_footer" bindtap="close_overlay"></view>底部内容块：
<!-- 底部弹出view -->
<view class="footer_container {{show?'yd_footer_conter':'yd_close_overlay'}} " bindtap="close_overlay">底部弹出</view>阴影yd_overlay是占满应用的这个显示区域，所以样式设置为：
.yd_overlay {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}底部内容块：
.footer_container {
text-align: center;
line-height: 110rpx;
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
border-radius: 20px 20px 0 0;
z-index: 99;
transition-property: height;
transition-duration: 900ms;
transition-timing-function: ease;
}这两个就像弹窗一样，从底部弹出，那么它就要覆盖原有的页面元素，所以使用固定定位给它们进行定位，初始高度设置为0。然后使用transition对高度进行过度，就是实现了弹出的效果了。
在js中设置阴影什么时候弹出，什么时候隐藏【show】
当点击按钮时，show设置为true：
pop_footer() {
this.setData({
show: true
})
},关闭弹窗：
close_overlay() {
this.setData({
show: false
})
},
show为true时，阴影和底部内容块高度为：
//阴影高度
.yd_show_overlay {
height: 100%;
}
//底部内容块高度
.yd_footer_conter {
height: 20%;
}
当点击关闭的时候：show为false：
.yd_close_overlay {
height: 0;
}
完整代码：
wxml:
<view class="btn-menu">
<button bindtap="pop_footer">底部弹出</button>
</view>
<!-- 阴影 -->
<view class="yd_overlay {{show?'yd_show_overlay':'yd_close_overlay'}} yd_popup_footer" bindtap="close_overlay"></view>
<!-- 底部弹出view -->
<view class="footer_container {{show?'yd_footer_conter':'yd_close_overlay'}} " bindtap="close_overlay">底部弹出</view>
css:
.yd_show_overlay {
height: 100%;
}
.yd_close_overlay {
height: 0;
}
.footer_container {
text-align: center;
line-height: 110rpx;
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
border-radius: 20px 20px 0 0;
z-index: 99;
transition-property: height;
transition-duration: 900ms;
transition-timing-function: ease;
}
.yd_popup_footer {
transition-property: height;
transition-duration: 900ms;
transition-timing-function: ease;
}
.yd_footer_conter {
height: 20%;
}
js:
// pages/popup/popup.js
Page({
/**
* 页面的初始数据
*/
data: {
show: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
pop_footer() {
this.setData({
show: true
})
},
close_overlay() {
this.setData({
show: false
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
如果是弹窗是从顶部弹出的话，就在相应css的bottom改为top即可！
文章评论