weui学习总结——2、操作反馈

叁歲伎倆 2022-06-09 06:23 292阅读 0赞

前言：weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。weui资源下载（也可以从官网下载）：  
[http://download.csdn.net/download/zhengyikuangge/9940737][http_download.csdn.net_download_zhengyikuangge_9940737]

这篇博客的内容是手机页面操作中的反馈功能，比如菜单，dialog(对话框)，toast(提示框)，单列、日期选择框，div页面切换（这个可能比较复杂，等第三篇详细说明）。**前四者的原理都是用js控制特殊div的显示与隐藏以及触发事件。**

*  手机移动web开发必须要做的两点：1、body中加上ontouchstart，即`<body ontouchstart>...</body>`；2、页面上加入`<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">`
 *  需要事先导入的资源：weui.css和jquery-x.x.x.js
 *  weui.css在上述weui资源中有，请自行下载。大约是在weui-1.1.2\\dist\\example 路径下。也可到我的百度网盘下载，链接：[http://pan.baidu.com/s/1cFAHNS][http_pan.baidu.com_s_1cFAHNS] 密码：iq4d
 *  jquery-x.x.x.js可自行下载。也可到我的百度网盘下载，链接：[http://pan.baidu.com/s/1sk90kcl][http_pan.baidu.com_s_1sk90kcl] 密码：zuzq

--------------------

### 菜单 ###

IOS菜单效果图：  
![这里写图片描述][SouthEast]

Android菜单效果图：  
![这里写图片描述][SouthEast 1]

代码：

<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
    
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">Android ActionSheet</a>
    
    
    
    <div>
            <div class="weui-mask" id="iosMask" style="display: none"></div>
            <div class="weui-actionsheet" id="iosActionsheet">
                <div class="weui-actionsheet__title">
                    <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
                </div>
                <div class="weui-actionsheet__menu">
                    <div class="weui-actionsheet__cell">示例菜单</div>
                    <div class="weui-actionsheet__cell">示例菜单</div>
                    <div class="weui-actionsheet__cell">示例菜单</div>
                    <div class="weui-actionsheet__cell">示例菜单</div>
                </div>
                <div class="weui-actionsheet__action">
                    <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
                </div>
            </div>
        </div>
        
    
        
        <div class="weui-skin_android" id="androidActionsheet" style="display: none">
            <div class="weui-mask"></div>
            <div class="weui-actionsheet">
                <div class="weui-actionsheet__menu">
                    <div class="weui-actionsheet__cell" value = "menu1" id="menu1">示例菜单</div>
                    <div class="weui-actionsheet__cell" value = "menu2" id="menu2">示例菜单</div>
                    <div class="weui-actionsheet__cell" value = "menu3" id="menu3">示例菜单</div>
                </div>
            </div>
        </div>
        
    
    
    
    //Android
     $(function(){
            var $androidActionSheet = $('#androidActionsheet');
            var $androidMask = $androidActionSheet.find('.weui-mask');
    
            $("#showAndroidActionSheet").on('click', function(){
                $androidActionSheet.fadeIn(200);
                $androidMask.on('click',function () {
                    $androidActionSheet.fadeOut(200);
                });
            });
    
            $("#menu1,#menu2,#menu3").on('click',function(){
               alert($(this).attr('value'));
               $androidActionSheet.hide();
            });
        });
    
        // ios
        $(function(){
            var $iosActionsheet = $('#iosActionsheet');
            var $iosMask = $('#iosMask');
    
            function hideActionSheet() {
                $iosActionsheet.removeClass('weui-actionsheet_toggle');
                $iosMask.fadeOut(200);
            }
    
            $iosMask.on('click', hideActionSheet);
            $('#iosActionsheetCancel').on('click', hideActionSheet);
            $("#showIOSActionSheet").on("click", function(){
                $iosActionsheet.addClass('weui-actionsheet_toggle');
                $iosMask.fadeIn(200);
            });
        });

--------------------

### dialog ###

IOS dialog样式1：  
![这里写图片描述][SouthEast 2]  
IOS dialog样式2：  
![这里写图片描述][SouthEast 3]  
Android dialog样式1：  
![这里写图片描述][SouthEast 4]

Android dialog样式2：  
![这里写图片描述][SouthEast 5]

代码如下：

<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
    
    
    
    <div id="dialogs">
            
            <div class="js_dialog" id="iosDialog1" style="display: none;">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
                    <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                    </div>
                </div>
            </div>
            
            
            <div class="js_dialog" id="iosDialog2" style="display: none;">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
                    </div>
                </div>
            </div>
            
            
            <div class="js_dialog" id="androidDialog1" style="display: none;">
                <div class="weui-mask"></div>
                <div class="weui-dialog weui-skin_android">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
                    <div class="weui-dialog__bd">
                        弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                    </div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                    </div>
                </div>
            </div>
            
            
            <div class="js_dialog" id="androidDialog2" style="display: none;">
                <div class="weui-mask"></div>
                <div class="weui-dialog weui-skin_android">
                    <div class="weui-dialog__bd">
                        弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                    </div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                    </div>
                </div>
            </div>
            
        </div>
        
    
    
    $(function(){
          var $iosDialog1 = $('#iosDialog1'),
                $iosDialog2 = $('#iosDialog2'),
                $androidDialog1 = $('#androidDialog1'),
                $androidDialog2 = $('#androidDialog2');
    
            $('#dialogs').on('click', '.weui-dialog__btn', function(){
                $(this).parents('.js_dialog').fadeOut(200);
            });
    
            $('#showIOSDialog1').on('click', function(){
                $iosDialog1.fadeIn(200);
            });
            $('#showIOSDialog2').on('click', function(){
                $iosDialog2.fadeIn(200);
            });
            $('#showAndroidDialog1').on('click', function(){
                $androidDialog1.fadeIn(200);
            });
            $('#showAndroidDialog2').on('click', function(){
                $androidDialog2.fadeIn(200);
            });
        });

--------------------

### toast ###

普通toast效果图如下：  
![这里写图片描述][SouthEast 6]

带刷新toast效果图如下：  
![这里写图片描述][SouthEast 7]

代码如下：

<a href="javascript:;" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
    
    
    
    
        <div id="toast" style="display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">已完成</p>
            </div>
        </div>
        
    
        
        <div id="loadingToast" style="display:none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content">数据加载中</p>
            </div>
        </div>
    
    
    // toast
        $(function(){
            var $toast = $('#toast');
            $('#showToast').on('click', function(){
                if ($toast.css('display') != 'none') return;
    
                $toast.fadeIn(100);
                setTimeout(function () {
                    $toast.fadeOut(100);
                }, 2000);
            });
        });
    
        // loading
        $(function(){
            var $loadingToast = $('#loadingToast');
            $('#showLoadingToast').on('click', function(){
                if ($loadingToast.css('display') != 'none') return;
    
                $loadingToast.fadeIn(100);
                setTimeout(function () {
                    $loadingToast.fadeOut(100);
                }, 2000);
            });
        });

--------------------

### 单列、日期选择器 ###

需要多导入一个js，代码如下：

单列选择器效果图如下：  
![这里写图片描述][SouthEast 8]

日期选择器效果图如下：  
![这里写图片描述][SouthEast 9]

代码如下：

<a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a>  
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showDatePicker">日期选择器</a>
    
    
    
    //单列选择器
    $(function(){
          $('#showPicker').on('click', function () {
    
            weui.picker([{
                label: '飞机票',
                value: 0
            }, {
                label: '火车票',
                value: 1
            }, {
                label: '的士票',
                value: 2
            },{
                label: '公交票 (disabled)',
                disabled: true,
                value: 3
            }, {
                label: '其他',
                value: 4
            }], {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    alert("已选择"+result);
                }
            });
        });
        //日期选择器
        $('#showDatePicker').on('click', function () {
            weui.datePicker({
                start: 1990,
                end: new Date().getFullYear(),
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    alert("已选择"+result);
                }
            });
        });
        });

--------------------

如果想实现点击某个对话框的确定按钮执行某些操作，最简单的可以直接从js绑定点击事件即可。最后一个单列、时间选择器可以从构造方法中修改。

[http_download.csdn.net_download_zhengyikuangge_9940737]: http://download.csdn.net/download/zhengyikuangge/9940737
[http_pan.baidu.com_s_1cFAHNS]: http://pan.baidu.com/s/1cFAHNS
[http_pan.baidu.com_s_1sk90kcl]: http://pan.baidu.com/s/1sk90kcl
[SouthEast]: /images/20220609/1fa5d055b3f54574a9e4947cdb7087ab.png
[SouthEast 1]: /images/20220609/ce1437c406f44972b28ec2991abfa7d2.png
[SouthEast 2]: /images/20220609/13153c443ffa40d39bd16212cdb27bbe.png
[SouthEast 3]: /images/20220609/4e6123079c6b4d008bc168cca955eaaf.png
[SouthEast 4]: /images/20220609/39d2be53b53143e597d5324d583f40a6.png
[SouthEast 5]: /images/20220609/393777ce12964ebe97ab92a7ec365b9e.png
[SouthEast 6]: /images/20220609/bac480ecdb704da885998d02ba74b541.png
[SouthEast 7]: /images/20220609/ebeb1e02470d45c3b8dbd89a78b63166.png
[SouthEast 8]: /images/20220609/3d21ab528b49424db2a06c8af55dd2c4.png
[SouthEast 9]: /images/20220609/ade1c77554bb4275949091ecd9302cd3.png