当前位置: 首页 > article >正文

wepy微信小程序自定义底部弹出框功能,显示与隐藏效果(淡入淡出,滑入滑出)

 视图html部分

  <view class="salePz">

 <view class="btnSelPz" @tap="pzModelClick">去选择</view>

  <!-- modal -->
 <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}">
 <view class="modal-cancel" bindtap="hideModal"></view>
 <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
  <!-- -->
  <view class='Mselect'>
  <view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'>
   {{item}}
  </view>
  </view>
  <view></view>
  <view class='Mcancel' bindtap='mCancel'>
  <text>取消</text>
  </view>
 </view>
 </view>

 </view>

style样式 

<style lang="less">

.btnSelPz{
  width: 150rpx;
  height: 60rpx;
    display: flex;
  justify-content: center;
  align-items: center;
  background: #2a67ea;
  border-radius: 10rpx;
  color: white;
margin-left: 10rpx;
}

// 底部弹出框-------------------------------------------
.arrow{
 display:inline-block;
 border:6px solid transparent;
 border-top-color:#000;
 margin-left:8px;
 position:relative;
 top:6rpx;
}
/* ---------------------------- */
/*模态框*/
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/*动画前初始位置*/
.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}


/* 底部弹出框 */
.bottom-positon{
 text-align: center;
}
.Mselect{
 margin-bottom: 20rpx;
}
.Mselect view{
 padding: 26rpx 0;
 background: #fff;
}
.Mselect view:not(:last-of-type){
 border-bottom: 1px solid #dfdede;
}
.Mcancel{
 background: #fff;
 padding: 26rpx 0;
}
</style>

 js部分

 export default class Web extends wepy.page {
    data = {
   //弹出框
      optionList:['所有','选项1','选项2'],
      value:'所有',
      hideFlag: true,//true-隐藏 false-显示
      animationData: {},//
  }
 }


     // 显示遮罩层
      showModal () {
      this.hideFlag=false
      // 创建动画实例
      var animation = wx.createAnimation({
        duration: 400,//动画的持续时间
        timingFunction: 'ease',//动画的效果 默认值是linear->匀速,ease->动画以低速开始,然后加快,在结束前变慢
      })
      this.animation = animation; //将animation变量赋值给当前动画
      var that=this
      var time1 = setTimeout(function () {
        that.slideIn();//调用动画--滑入
        //  var that = this;
        clearTimeout(time1);
        time1 = null;
      }, 100)
          this.$apply()
      }

      // 隐藏遮罩层
      hideModal () {
      var animation = wx.createAnimation({
        duration: 400,//动画的持续时间 默认400ms
        timingFunction: 'ease',//动画的效果 默认值是linear
      })
      this.animation = animation
      this.slideDown();//调用动画--滑出
      var that=this
      var time1 = setTimeout(function () {
        that.hideFlag=true
         that.$apply()
        clearTimeout(time1);
        time1 = null;
      }, 220)//先执行下滑动画,再隐藏模块
          this.$apply()
      }
          //动画 -- 滑入
      slideIn (){
      this.animation.translateY(0).step() // 在y轴偏移,然后用step()完成一个动画
        this.animationData=this.animation.export()
          this.$apply()
      }
      //动画 -- 滑出
      slideDown(){
      this.animation.translateY(300).step()
        this.animationData= this.animation.export()
          this.$apply()
      }

    methods = {
      // 点击选项
    getOption(e){
      this.value=e.currentTarget.dataset.value
      this.hideFlag=true
      this.$apply()
    },
    //取消
    mCancel() {
    this.hideModal();
        this.$apply()
    },


 methods = {
      // 点击选项
    getOption(e){
      this.value=e.currentTarget.dataset.value
      this.hideFlag=true
      this.$apply()
    },
    //取消
    mCancel() {
    this.hideModal();
        this.$apply()
    },

}

Tips: 


http://www.kler.cn/a/585841.html

相关文章:

  • Linux中grep、sed和awk常见用法总结
  • vscode怎么debug vue项目
  • 68.Harmonyos NEXT 图片预览组件应用实践(一):相册与社交场景
  • C++刷题(一):顺序表 + 单链表
  • OpenHarmony-XTS测试
  • UE5.5 Niagara初始化粒子模块
  • 【技海登峰】Kafka漫谈系列(八)Controller:Zookeeper模式与KRaft模式
  • STAR Decomposition 一种针对极端事件的信号分解方法 论文精读加复现
  • AI大模型测试用例生成平台
  • Nginx正向代理HTTPS配置指南(仅供参考)
  • WPS 搭配 Zotero 插件使用
  • 蓝桥杯 再创新高【省模拟赛】
  • 前端组件封装艺术:设计原则与最佳实践指南
  • c语言经典基础编程题
  • 【免费】2008-2020年各省城镇登记失业率数据
  • 总结 HTTPS 的加密流程
  • 【栈数据结构应用解析:常见算法题详细解答】—— Leetcode
  • 计算机网络——路由器
  • 用 Vue 3.5 TypeScript 重新开发3年前甘特图的核心组件
  • HTML5 Web SQL