关于javascript:仿IOS模态弹窗组件恋人小清单开发总结

31次阅读

共计 5256 个字符,预计需要花费 14 分钟才能阅读完成。

因为默认的弹窗很丑。所以决定本人写一个仿 IOS 的模态弹窗组件

先看下效果图:

能够扫码体验

目前只是简略实现了一些性能:能够管制确定和勾销按钮的文字、色彩、显示程序。

应用办法:

1、在页面的 json 配置文件外面增加组件

{
  "usingComponents": {"dialog": "/components/dialog/dialog"}
}

2、页面的 wxml 外面引入弹窗组件

3、在页面的 js 外面初始化组件
/**

  • 生命周期函数 – 监听页面加载

*/

onLoad: function (options) {this.dialog = this.selectComponent('#dialog');
}

4、接下来就能够应用了。调用示例

this.dialog.showDialog({
    title: "确定要删除以后清单吗",
    content: "删除后,清单就找不回来了哦",
    cancelText: "我点错了",
    confirmText: "我要删除",
    confirmColor: "#f96e49",
    cancelColor: "#3790EE",
    showCancel: true,
    confirmPosition: "left",
    cancelHandler: function () {console.log("点击了勾销按钮");        
    },
    confirmHandler: function () {console.log("点击了确定按钮 OUTER");
    }
});

几年前写的代码,间接拿来用。相对来说比较简单。没有花里胡哨的(有点 low 我晓得。。)

整个组件的原代码如下:

1、dialog.wxml

<view class="custom_dialog" wx:if="{{show}}">
    <view class="cover"></view>
    <view class="dialog">
        <view class="tip flex_center {{noTitle?'no_tip':''}}">
            <view class="flex_full">{{title}}</view>
        </view>
        <view class="content flex_baseline {{noContent?'no_content':''}}">
            <view class="flex_full">{{content}}</view>
        </view>
        <view class="op_btn flex_center" wx:if="{{confirmPosition=='right'}}">
            <view class="cancel flex_full" style="color: {{cancelColor}}" wx:if="{{showCancel}}" catchtap="_cancelHandler">{{cancelText}}</view>
            <view class="confirm flex_full" style="color: {{confirmColor}}" catchtap="_confirmHandler" wx:if="{{!confirmNeedAuth}}">{{confirmText}}</view>
            <button class="confirm reset-btn flex_full" wx:else style="color: {{confirmColor}}"
                    open-type="getUserInfo"
                    bindgetuserinfo="_confirmHandler">{{confirmText}}</button>
        </view>
        <view class="op_btn flex_center" wx:if="{{confirmPosition=='left'}}">
            <view class="confirm flex_full" style="color: {{confirmColor}}" catchtap="_confirmHandler" wx:if="{{!confirmNeedAuth}}">{{confirmText}}</view>
            <button class="confirm reset-btn flex_full" wx:else style="color: {{confirmColor}}"
                    open-type="getUserInfo"
                    bindgetuserinfo="_confirmHandler">{{confirmText}}</button>
            <view class="cancel flex_full" style="color: {{cancelColor}}" wx:if="{{showCancel}}" catchtap="_cancelHandler">{{cancelText}}</view>
        </view>
    </view>
</view>

2、dialog.wxss

.flex_center {
    display: flex;
    align-items: center;
}

.flex_end {
    display: flex;
    align-items: flex-end;
}

.flex_baseline {
    display: flex;
    align-items: baseline;
}

.flex_full {flex: 1;}
.reset-btn:after {border: none;}

.reset-btn {
    background-color: #FAFAFA;
    margin: 0;
    padding: 0;
    font-size: 32rpx;
    border-radius: 24rpx;
}
.custom_dialog{

}
.custom_dialog .cover{
    background-color: #111;
    opacity: 0.6;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
}
.custom_dialog .dialog{
    width: 560rpx;
    border-radius: 24rpx;
    background-color: #FAFAFA;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 6000;
    margin: -140rpx 0 0 -280rpx;
    padding-top: 10rpx;
    text-align: center;
}
.custom_dialog .dialog .tip, .custom_dialog .dialog .single_tip{
    font-size: 32rpx;
    color: #242424;
}
.custom_dialog .dialog .tip{
    padding: 32rpx 32rpx 30rpx;
    /*height: 100rpx;*/
    text-align: center;
    box-sizing: border-box;
    font-weight: bold;
}
.custom_dialog .dialog .single_tip{
    height: 160rpx;
    line-height: 1.6;
}
.custom_dialog .dialog .content, .custom_dialog .dialog .single_content{
    font-size: 29rpx;
    line-height: 1;
    color: #161616;
    padding: 0 20rpx 40rpx;
}
.custom_dialog .dialog .content{
    margin-top: -10rpx;
    /*height: 70rpx;*/
}

.custom_dialog .dialog .single_content{
    height: 160rpx;
    line-height: 160rpx;
}

.custom_dialog .dialog .no_content{padding-bottom: 20rpx !important;}

.custom_dialog .dialog .no_tip{padding-bottom: 10rpx !important;}



.custom_dialog .dialog .op_btn{
    border-top: 1rpx solid #ccc;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
}
.custom_dialog .dialog .op_btn .confirm{color: #3790EE;}
.custom_dialog .dialog .op_btn .cancel{color: #FF644E;}
.custom_dialog .dialog .op_btn view{border-right: 1rpx solid #ccc;}
.custom_dialog .dialog .op_btn view:last-child{border: none;}

3、dialog.js

const tabbar = require('../../utils/tabbar.js');
Component({
    /**
     * 组件的属性列表
     */
    properties: {},

    /**
     * 组件的初始数据
     */
    data: {
        show: false,
        title: "",// 题目
        content: "",// 内容
        noTitle: false,// 是否显示题目
        noContent: false,// 是否显示内容
        showCancel: true,// 是否显示勾销按钮
        cancelText: "勾销",// 勾销按钮文字
        cancelColor: "#FF644E",// 勾销按钮色彩
        confirmText: "确定",// 确定按钮文字
        confirmColor: "#3790EE",// 确定按钮色彩
        confirmPosition: "right",// 确定按钮地位:left/right
        cancelHandler: null,// 点击勾销按钮回调事件
        confirmHandler: null// 点击确定按钮回调事件
    },

    /**
     * 组件的办法列表
     */
    methods: {showDialog: function (content) {
            var that = this;
            that.setData({
                show: true,
                title: content.title ? content.title : "",
                content: content.content ? content.content : "",
                noTitle: !content.title ? true : false,
                noContent: !content.content ? true : false,
                cancelText: content.cancelText ? content.cancelText : that.data.cancelText,
                cancelColor: content.cancelColor ? content.cancelColor : that.data.cancelColor,
                confirmText: content.confirmText ? content.confirmText : that.data.confirmText,
                confirmColor: content.confirmColor ? content.confirmColor : that.data.confirmColor,
                showCancel: content.showCancel != null ? content.showCancel : that.data.showCancel,
                confirmPosition: content.confirmPosition ? content.confirmPosition : that.data.confirmPosition,
                confirmNeedAuth: content.confirmNeedAuth ? content.confirmNeedAuth : that.data.confirmNeedAuth,
                cancelHandler: content.cancelHandler,
                confirmHandler: content.confirmHandler
            });
            tabbar.hideTab(this);
        },
        _cancelHandler: function () {console.log("点击了勾销按钮 INNER");
            this.setData({show: false});
            tabbar.showTab(this);
            typeof this.data.cancelHandler == 'function' && this.data.cancelHandler();},
        _confirmHandler: function (e) {console.log("点击了确定按钮 INNER");
            this.setData({show: false});
            tabbar.showTab(this);
            typeof this.data.confirmHandler == 'function' && this.data.confirmHandler(e);
        }
    }
});

正文完
 0