想法
不想使用第三方的小程序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即可!
文章评论