读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

微信小程序UI组件:底部弹出【pop-up】

2020年09月14日 199点热度 0人点赞 0条评论

想法

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

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

效果图

微信小程序UI组件:底部弹出【pop-up】插图

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

这个组件分为两个部分:

  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即可!

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
CSS hook JavaScript node vue git Nginx react flutter 小程序 随笔 阅读 taro canvas redux Echarts 闲谈 悦读 mysql
推荐文章
  1. 左侧弹出菜单栏目【小程序】
  2. 微信小程序中自定义导航和地图定位
  3. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  4. 小程序全局和局部自定义导航栏样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号