利用Vant Weapp 组件库 Dialog组件实现自定义倒计时弹出框

小九今天不码代码

已于 2024-01-30 16:45:58 修改

阅读量810

点赞数 9

分类专栏： # Vant Weapp 文章标签：微信小程序

于 2024-01-29 14:57:35 首次发布

本文链接：https://blog.csdn.net/weixin_42285486/article/details/135912362

版权

Vant Weapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)https://vant-contrib.gitee.io/vant-weapp/0.x/#/dialog

Vant Weapp 安装参考

微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法_c:\users\i\desktop\miniapp\tjyfminiapp/miniprogram-CSDN博客

<!-- pages/dialog/dialog.wxml -->
<view class="dialog-content">
    <van-button bind:click="showDialog">倒计时弹出框</van-button>
    <van-dialog id="van-dialog" show="{{isShow}}" title="提示"  show-confirm-button="{{false}}"  use-slot>
        <view class="content">
            <view class="message">这是一个倒计时弹出框</view>
            <van-button type="warning" class="confirm-button" bind:click="closeDialog">确定<text wx:if="{{count > 0}}">（{{count}}s）</text></van-button>
        </view>
    </van-dialog>
</view>

// pages/dialog/dialog.js

import { setWatcher } from '../../utils/watch.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow:false,
    count:5,
    timer:null,
  },
  //显示倒计时弹出框
  showDialog(){
    this.setData({
      isShow:true,
      count:5
    })
    this.data.timer = setInterval(
      ()=>{
        this.setData({
          count:this.data.count-1
        })
        if(this.data.count==0){
          this.closeDialog()
        }
      },1000
    )
  },
  //关闭倒计时弹出框
  closeDialog(){
    this.setData({
      isShow:false,
      count:0
    })
    clearInterval(this.data.timer)
  },
//监听count值变化，计时器是否被清除
  watch: {
    count(val){
      console.log('count的值',val)
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    setWatcher(this)

  },

})

//pages/dialog/dialog.json

{
  "usingComponents": {
    "van-dialog":"@vant/weapp/dialog/index",
    "van-button":"@vant/weapp/button/index"
  }
}

/* pages/dialog/dialog.wxss */
.dialog-content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.content{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.message{
    margin: 20rpx 0 40rpx;
}
.confirm-button{
    margin-bottom: 30rpx;
}
.van-button--warning{
    background: linear-gradient(to right, #ff6034, #ee0a24)!important;
    width: 300rpx!important;
    border-radius: 100rpx!important;
}

//page页面监听方法

// utils/watch.js
 
const observe = (obj, key, watchFun, deep, page) => {
    let oldVal = obj[key]
    // 如果监听对象是object类型并且指定deep（深度监听）
    if (oldVal !== null && typeof oldVal === 'object' && deep) {
      // 递归子集，依次执行observe()
      Object.keys(oldVal).forEach(item => {
        observe(oldVal, item, watchFun, deep, page)
      })
    }
    // 使用Object.defineProperty()劫持数据的写操作，在监听对象改变后执行传入的watchFun
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set(value) {
        if (value === oldVal) return
        watchFun.call(page, value, oldVal)
        oldVal = value
      },
      get() {
        return oldVal
      }
    })
  }
   
  export const setWatcher = (page) => {
    // 页面里的data字段
    const data = page.data
    // 页面里的watch字段
    const watch = page.watch
    // 对watch里列举的每一个字段（需要监听的字段）执行observe()
    Object.keys(watch).forEach(key => {
      let targetData = data
      const targetKey = key
      // 支持deep深度监听，使用deep时需要配合handler使用，否则直接编写函数
      const watchFun = watch[key].handler || watch[key]
      const deep = watch[key].deep
      observe(targetData, targetKey, watchFun, deep, page)
    })
  }