关注互联网应用及运维技术的个人博客

使用微信小程序的UI组件进行底部弹出【pop-up】

不想使用第三方的小程序UI组件,理由是因为第三方组件是所有常见组件的集合,css样式代码过于庞大,虽然说是轻量级的组件,但是对于小程序来说,依旧很庞大。并且在一个小程序中也不一定用到所有的组件,却是引入全部的css代码。

所以我想将每一个组件单独剥离出来,当使用到某一个组件的时候,就引入对应的组件和样式即可。

底部弹出组件的效果图:

这个组件分为两个部分:

  1. 阴影部分
  2. 底部内容部分

当我们点击“弹出”按钮或者触发弹出事件的时候,阴影和底部内容块一起从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即可!

赞(0)
未经允许不得转载:飞天狒狒 » 使用微信小程序的UI组件进行底部弹出【pop-up】

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址