zoukankan      html  css  js  c++  java
  • 小程序开发 模态弹出框的控制

    // 模态框控制弹出按钮
    <view class='btn-right-btn flexca' bindtap="setModalStatus" data-status="1">立即抢拼</view>
     
    //模态弹出框外包裹
    <view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}">
     
    JS函数 
    //-----------------------------------------
    // 弹窗
    setModalStatus: function (e) {
    var animation = wx.createAnimation({
    duration: 200,
    timingFunction: "linear",
    delay: 0
    })

    this.animation = animation
    animation.translateY(300).step();

    this.setData({
    animationData: animation.export()
    })

    if (e.currentTarget.dataset.status == 1) {

    this.setData(
    {
    showModalStatus: true
    }
    );
    }
    setTimeout(function () {
    animation.translateY(0).step()
    this.setData({
    animationData: animation
    })
    if (e.currentTarget.dataset.status == 0) {
    this.setData(
    {
    showModalStatus: false
    }
    );
    }
    }.bind(this), 200)
    },
  • 相关阅读:
    uni-app快速上手
    uni-app快速上手
    什么是uni-app?
    什么是uni-app?
    美颜小程序准备
    美颜小程序准备
    vue的基本使用
    vue的基本使用
    Web前端开发(高级)下册-目录
    Web前端开发(高级)下册-目录
  • 原文地址:https://www.cnblogs.com/dianzan/p/7636629.html
Copyright © 2011-2022 走看看