首页

Bootstrap Table实现定时刷新数据

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Bootstrap Table实现定时刷新数据

推荐第二种方法

  • 令表格的id为realTimeTable

1、毁掉表格，再查询数据后append，如果你查大量的数据（例如：查询很多渠道的信息），而获取服务器数据又太慢，你就会看到表格在一行一行的增加

  • 定时器，多长时间执行一次，自己定义，此处是30S 
setInterval(function() { queryAll();
}, 30000);
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •
  • 先定义一个函数，里面放入查询的方法updateRealTimeData和你所自定义使用的方法 
function queryAll() { updateRealTimeData();
        .
        .
        .
        .
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    •
  • 方法updateRealTimeData 
 function updateRealTimeData() { if(errorFlag || appid == -1) return; //把表格的tbody移除，不然后面会一直添加 $("#realTimeTable").bootstrapTable('removeAll'); //获取数据 $.ajax({
            data: { //向服务器发送的一些参数，像日期，游戏ID什么的 .
                        .
                        .
                        .
                        .
                },
                    type: "post", //url不用说了吧，否则不知道向服务器哪个接口发送并请求 url: *******,
                    async: true, //超时时间 timeout:30000,
                    success: function(msg) { if(msg.code == '1') { //定义的函数实现对表格赋值，自定义想传的参数，但别忘了msg，不然搞个屁 showTableData(msg，……);
                        }

                    }
                });
            }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    •
  • 方法showTableData 
function showTableData(msg，……) { tableData = []; for(var i = 0; i < json.length; i++) {
                tableData.push({ //这里也就是data-field的名称，getDate是服务器返回的字段名 date: json[i].getDate,
                       .
                       .
                       .
                       .
                }) //数组反向排列，看情况使用 tableData.reverse(); //向tbody里面添加数据 $("#realTimeTable").bootstrapTable('append', tableData);
            }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    •

2、使用updateRow方法

  • 首先，得存在表格，里面有数据，才能更新行，否则没作用。此方法不会像上面的方法表格消失再增加，这个是整体不变，里面的数据会自动更新
  • 定时器，和上面一样，多长时间执行一次，自己定义，此处是30S 
setInterval(function() { queryAll(); for (var j = 0; j < 请求的数据的总条数（也就等于表格的行数）; j++) {
                changeAllChannelRealTime(j, .....);
            } }, 30000);
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

    


function changeAllChannelRealTime(j, .....) {
        $.ajax({
            data: { //向服务器发送的一些参数，像日期，游戏ID什么的 .
                        .
                        .
                        .
                        .
                },
                    type: "post", //url不用说了吧，否则不知道向服务器哪个接口发送并请求 url: *******,
                    async: true, //超时时间 timeout:30000,
                    success: function(msg) { if (msg.code == '1') {
                            changeData(j, msg, .....);
                    }
                },
                error: function () { msgToast.error("查询数据出错");
                }
            });
        }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

    


function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { //i表示第几行，从0开始 index: i,
                row: { //这里也就是data-field的名称,*表示字段名 date: msg.*
                        .
                        .
                        .
                        .
                }
            });         
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •

大象~ 大象~ 你的鼻子怎么那么长~~ 


其他相关：

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(5547)

nodejs 升级后， vue+webpack 项目 node-sass 报错的解决方法

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

关于 node 环境升级到 v8^ 以上，node-sass 报错的解决方法

今天给同事电脑升级了一下系统，顺便升级了所有的软件，发现原来好好的项目报错了。报错大致信息如下： 

 ERROR Failed to compile with 1 errors                                                                      下午1:56:26 error in ./src/components/Hello.vue Module build failed: Error: Missing binding /Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/vendor/darwin-x64-57/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found bindings for the following environments: - OS X 64-bit with Node.js 6.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/binding.js:15:13) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2d1bdf0c","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 4:14-394 13:3-17:5 14:22-402 @ ./src/components/Hello.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    •

这段代码是我升级node之后，在我的电脑上复制出来的。但大概就是这么个意思，里面根据不同的项目位置什么的，会有所不同。

简单的说，这段代码就是告诉你，node-sass 不兼容 node v8 的版本。那就很好解决了。在当前项目下面执行 

npm i node-sass -D
    
    

        
  • 
            1
        
    •

然后项目就恢复正常了。

当项目出错之后，不要着急，仔细看下报错代码，实在不行用翻译工具翻译一下。一般来说，是很快能够找到解决方法的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(6354)

CefSharp 集成谷歌浏览器详解（三）--官网示例解析2 CefSettings 介绍

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本章节介绍CefSetting各种设置 

CefExample.Init(osr: false, multiThreadedMessageLoop: multiThreadedMessageLoop, browserProcessHandler: browserProcessHandler); 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    •

这个方法就是Cef的初始化设置。里面有一些设置是已经注释的，每项设置我也没有详细研究，感兴趣的朋友可以自己看看代码和注释。这里我只说说几个比较重要的设置。 

//设置语言环境是中文环境
settings.Locale = "zh_CN";
//远程调试端口
settings.RemoteDebuggingPort = 8088;
//浏览器缓存的路径,可以设置到某个磁盘，默认设置是在软件运行目录下面。
settings.CachePath = "cache";
//让浏览器的消息循环在一个单独的线程中执行,建议设置成true,具体含义看看浏览器消息处理。
settings.MultiThreadedMessageLoop = true;
//这个我理解不到，只有看源码的注释;
settings.ExternalMessagePump = false;
 //获取本机internet代理设置。
        var proxy = ProxyConfig.GetProxyInformation();
        switch (proxy.AccessType)
        {
            case InternetOpenType.Direct:
            {
                //Don't use a proxy server, always make direct connections.
                settings.CefCommandLineArgs.Add("no-proxy-server", "1");
                break;
            }
            case InternetOpenType.Proxy:
            {
                settings.CefCommandLineArgs.Add("proxy-server", proxy.ProxyAddress);
                break;
            }
            case InternetOpenType.PreConfig:
            {
                settings.CefCommandLineArgs.Add("proxy-auto-detect", "1");
                break;
            }
        }
        //直接注释掉，因为这个应用程序已经包含在工程目录下面
        //settings.BrowserSubprocessPath = "..\\..\\..\\..\\CefSharp.BrowserSubprocess\\bin\\" + architecture + "\\Debug\\CefSharp.BrowserSubprocess.exe";
        //注册custom的域名，程序内部资源访问域名。
        //custom://cefsharp/zpy.html这种域名注册，后续注册https和test都是使用这种方式，zpy.html就是我自己加载在项目内的html文件。可以使用这种方式用本地html开发图形界面。模糊B/S程序和C/S程序。
                    settings.RegisterScheme(new CefCustomScheme
        {
            SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
            SchemeHandlerFactory = new CefSharpSchemeHandlerFactory(),
            IsSecure = true //treated with the same security rules as those applied to "https" URLs
            //SchemeHandlerFactory = new InMemorySchemeAndResourceHandlerFactory()
        });
        //在设置最后使用Cef.AddCrossOriginWhitelistEntry(BaseUrl, "https", "cefsharp.com", false);这些域名添加到白名单。 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    • 

        
  • 
            37
        
    • 

        
  • 
            38
        
    • 

        
  • 
            39
        
    • 

        
  • 
            40
        
    • 

        
  • 
            41
        
    • 

        
  • 
            42
        
    • 

        
  • 
            43
        
    • 

        
  • 
            44
        
    •

做完这些以后并且设置好ChromiumWebBrowser后就可以使用Application.Run(browser);启动浏览器。


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(7817)

从h5网站页面跳转到微信小程序——微信web-view高级用法9

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

我们把自己的html5网页，
通过小程序的web-view组件，
加载到小程序。

为了能够更好的利用小程序本身的功能特性，
会希望从h5页面跳转到小程序页面中去，
我们后面要分享的h5网页调用小程序支付，
就需要用到这个特性。

arrow跳转

这一节课程，
子恒老师跟你分享web-view中的h5页面怎么跳转到小程序里去…

猛击这里，
试看《h5页面跳转到小程序》视频

https://edu.csdn.net/course/play/6970/141895

设置web-view的业务域名——小程序web-view高级用法1
小程序使用web-view打开h5网页——小程序web-view高级用法2
微信web-view高级用法介绍——小程序web-view高级用法3
小程序web-view JSSDK配置文件说明——小程序web-view高级用法4
web-view的h5页面设置jssdk选项——小程序web-view高级用法5
小程序web-view打开网页demo实例——小程序web-view高级用法6
微信web-view用wx.getNetworkType获取网络状态——小程序web-view高级用法7
web-view调用wx.scanQRCode微信扫一扫——小程序web-view高级用法8

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(10667)

JavaScript判断变量是否为空对象 {} 的几种方法

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

将json对象转化为json字符串，再判断该字符串是否为"{}" 

var obj = {}; var b = (JSON.stringify(obj) === "{}");
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

for in 循环判断 

var obj = {}; var b = function() { for(var key in obj) { return false;
    } return true;
}
console.log(b()); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    •

网上很多都是如上的说法，但是会存在一个问题，就是如果obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj为任意数字也返回true，所以有了下面这个for in 循环判断：

方案一： 

var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Array.isArray(obj)){ return false;
    } return true;
}
console.log(b()); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    •

方案二： 

var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Object.prototype.toString.call(obj) === "[object Array]"){ return false;
    } return true;
}
console.log(b()); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    •

上面两种方案的区别就是判断判断空数组的方式不同。

jQuery的jQuery.isEmptyObject(obj)方法 

var obj = {}; var b = $.isEmptyObject(obj);
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

jQuery.isEmptyObject(obj) 方法依然存在obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj为任意数字返回true的问题，所以我们还应该再用typeof 或者 $.type() 判断一下： 

var obj = {}; var b = $.isEmptyObject(obj) && $.type(obj) === "object";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

    


var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && !Array.isArray(obj);
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

    


var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。 

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length;
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.getOwnPropertyNames() 方法存在obj=0 以及obj为任意数字返回true的问题，所以我们还应该再用typeof 判断一下： 

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length && typeof obj === "object";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.keys()方法

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in循环遍历该对象时返回的顺序一致 。 

var obj = {}; var b = !Object.keys(obj).length;
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.keys() 方法存在obj=""，obj=[]，obj=0 以及obj为任意数字返回true的问题，所以依旧需要加判断如下： 

var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && !Array.isArray(obj);
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

    


var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

在实际应用中，如果对象不为空，并且知道对象不为空时，某个属性一定存在，则直接判断这个对象的此属性是否存在。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(5272)

QTableView基本用法

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、添加表头：

  1. QStandardItemModel *model = new QStandardItemModel(); 
  2. model->setColumnCount(2); 
  3. model->setHeaderData(0,Qt::Horizontal,QString::fromLocal8Bit("卡号")); 
  4. model->setHeaderData(1,Qt::Horizontal,QString::fromLocal8Bit("姓名"));

复制代码


二、设置表格属性：

  1. ui->tableView->setModel(model); 
  2. //表头信息显示居左 
  3. ui->tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft); 
  4. //设置列宽不可变 
  5. ui->tableView->horizontalHeader()->setResizeMode(0,QHeaderView::Fixed); 
  6. ui->tableView->horizontalHeader()->setResizeMode(1,QHeaderView::Fixed); 
  7. ui->tableView->setColumnWidth(0,101); 
  8. ui->tableView->setColumnWidth(1,102);

复制代码


注：在进行表格设置时必须是“ui->tableView->setModel(model);”在前，属性具体设置在后，

反之则设置不会生效。如上述代码所示。

三、添加行（添加三行一样的信息）：

  1. for(int i = 0; i < 3; i++) 
  2. { 
  3.      model->setItem(i,0,new QStandardItem("2009441676")); 
  4.         //设置字符颜色 
  5.      model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0))); 
  6.         //设置字符位置 
  7.      model->item(i,0)->setTextAlignment(Qt::AlignCenter); 
  8.      model->setItem(i,1,new QStandardItem(QString::fromLocal8Bit("哈哈"))); 
  9. }

复制代码


四、删除行：

  1. //x是指定删除哪一行 
  2. model->removeRow(x); 
  3. //删除所有行 
  4. model->removeRows(0,model->rowCount());

复制代码


再举一个例子：

在一个药品划价模块中有这样的操作流程：

检索处方项目成功后，把该项目显示到QTableView里，把需要编辑的数量字段提供给用户输入，用户输入确认后，该项目留在列表中，然后开始下一项目检索录入。

实现过程如下：

录入的项目保留在临时表tmp中，界面上的QTableView取名为tbList，与tbList关联的Model取名为tb1。检索成功后，把检索结果插入到临时表中，把需要编辑的字段提供给用户。

  1. tb1=newQSqlTableModel(this,*dbR); //dbR是本应用中的数据源 
  2. tb1->setTable("tmp"); //处方临时表

复制代码


程序中需要显示的时候，

  1. tbList->setModel(NULL); //清除原先数据集 
  2. tbList->setModel(tb1); //刷新显示

复制代码


程序中需要提供编辑输入的时候

  1. QModelIndexmdidx=m_ui->tbList->model()->index(row,column); //获得需要编辑的单元格的位置 
  2. m_ui->tbList->setFocus(); //把输入焦点交给tbList 
  3. m_ui->tbList->setCurrentIndex(mdidx); //设定需要编辑的单元格 
  4. m_ui->tbList->edit(mdidx); //开始编辑

复制代码


有一个问题需要注意。向QTableView中添加记录时，字段一定要完整，不能有空白字段，否则结果无法保存。切记。

如果需要对用户输入做限制，比如只能在指定的字段输入指定的数据类型，可以通过QItemDelegate来实现。

贴一段代码，说明QTableView基本用法

  1. QStandardItemModel model; 
  2. //设置大小 
  3. model.setColumnCount(3); //列 
  4. model.setRowCount(musicFound); //行 
  5. //设置标题 
  6. model.setHeaderData(0,Qt::Horizontal,"ID"); 
  7. //添加数据 
  8. for(int j=0;j<row;j++)
  9. {
  10.             //写id
  11.             QStandardItem *itemID = new QStandardItem("hello");//QString::number(j)));
  12.             model.setItem(j,0,itemID);
  13. }
  14. //选择这个model 
  15. m_ui->tableView->setModel(&model); 
  16. //隐藏左边那列 
  17. m_ui->tableView->verticalHeader()->hide(); 
  18. //列宽 
  19. m_ui->tableView->setColumnWidth(0,30); 
  20. //整行选择 
  21. m_ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

 

 

QT的MVC（View/Delegate）模型十分强大，可以利用各种控件来对表格的输入进行限制，不过我以前一直没有过，这几天研究了一下，写个小例子，希望大家喜欢。
 
如果看不懂这个例子，请先看QT的自带例子：http://qt-project.org/doc/qt-4.8/itemviews-spinboxdelegate.html
 
思路：
 
1：为每一列定义委托：
A：第一列是编号列，使用只读委托，令该列的单元格是只读的
B：第三列是ID列，只能输入1－12个数字，利用QLineEdit委托和正则表达式对输入进行限制
C：第四年龄列，利用QSpinBox委托进行输入限制，只能输入1－100之间的数字
D：第五列是性别列，利用QComboBox委托对输入进行限制，该列的单元格只能输入Male或Female
E：第六列是头像列，在该列的单元格中央放置一张头像
2：定义代理类，把所有单元格中的字符居中显示。
3：利用QSS，将表格的背景色弄成黄蓝相间。
 
截图：
 


上代码：
 1.#include <QtGui>   
 2.  
 3.//编号列，只读委托   
 4.//这个方法我还真想不到，呵呵   
 5.class ReadOnlyDelegate : public QItemDelegate  
 6.{  
 7.    Q_OBJECT  
 8.public:  
 9.    ReadOnlyDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 10.    QWidget *createEditor(QWidget*parent, const QStyleOptionViewItem &option, 
 11.        const QModelIndex &index) const  
 12.    {  
 13.        return NULL;  
 14.    }  
 15.};  
 16.  
 17.//ID列，只能输入1－12个数字   
 18.//利用QLineEdit委托和正则表达式对输入进行限制   
 19.class UserIDDelegate : public QItemDelegate  
 20.{  
 21.    Q_OBJECT  
 22.public:  
 23.    UserIDDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 24.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 25.        const QModelIndex &index) const  
 26.    {  
 27.        QLineEdit *editor = new QLineEdit(parent);  
 28.        QRegExp regExp("[0-9]{0,10}");  
 29.        editor->setValidator(new QRegExpValidator(regExp, parent));  
 30.        return editor;  
 31.    }  
 32.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 33.    {  
 34.        QString text = index.model()->data(index, Qt::EditRole).toString();  
 35.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 36.        lineEdit->setText(text);  
 37.    }  
 38.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 39.        const QModelIndex &index) const  
 40.    {  
 41.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 42.        QString text = lineEdit->text();  
 43.        model->setData(index, text, Qt::EditRole);  
 44.    }  
 45.    void updateEditorGeometry(QWidget *editor,  
 46.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 47.    {  
 48.        editor->setGeometry(option.rect);  
 49.    }  
 50.};  
 51.  
 52.//年龄列，利用QSpinBox委托进行输入限制，只能输入1－100之间的数字   
 53.class AgeDelegate : public QItemDelegate  
 54.{  
 55.    Q_OBJECT  
 56.public:  
 57.    AgeDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 58.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 59.        const QModelIndex &index) const  
 60.    {  
 61.        QSpinBox *editor = new QSpinBox(parent);  
 62.        editor->setMinimum(1);  
 63.        editor->setMaximum(100);  
 64.        return editor;  
 65.    }  
 66.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 67.    {  
 68.        int value = index.model()->data(index, Qt::EditRole).toInt();  
 69.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 70.        spinBox->setValue(value);  
 71.    }  
 72.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 73.        const QModelIndex &index) const  
 74.    {  
 75.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 76.        spinBox->interpretText();  
 77.        int value = spinBox->value();  
 78.        model->setData(index, value, Qt::EditRole);  
 79.    }  
 80.    void updateEditorGeometry(QWidget *editor,  
 81.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 82.    {  
 83.        editor->setGeometry(option.rect);  
 84.    }  
 85.};  
 86.  
 87.//性别列，利用QComboBox委托对输入进行限制   
 88.//这一列的单元格只能输入Male或Female   
 89.class SexDelegate : public QItemDelegate  
 90.{  
 91.    Q_OBJECT  
 92.public:  
 93.    SexDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 94.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 95.        const QModelIndex &index) const  
 96.    {  
 97.        QComboBox *editor = new QComboBox(parent);  
 98.        editor->addItem("Female");  
 99.        editor->addItem("Male");  
 100.        return editor;  
 101.    }  
 102.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 103.    {  
 104.        QString text = index.model()->data(index, Qt::EditRole).toString(); 
 105.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 106.        int tindex = comboBox->findText(text);  
 107.        comboBox->setCurrentIndex(tindex);  
 108.    }  
 109.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 110.        const QModelIndex &index) const  
 111.    {  
 112.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 113.        QString text = comboBox->currentText();  
 114.        model->setData(index, text, Qt::EditRole);  
 115.    }  
 116.    void updateEditorGeometry(QWidget *editor,  
 117.        const QStyleOptionViewItem &option, const QModelIndex &index) const 
 118.    {  
 119.        editor->setGeometry(option.rect);  
 120.    }  
 121.};  
 122.  
 123.//头像列，只是在单元格中央放一张小图而已   
 124.class IconDelegate : public QItemDelegate  
 125.{  
 126.    Q_OBJECT  
 127.public:  
 128.    IconDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 129.    void paint(QPainter *painter, const QStyleOptionViewItem &option,  
 130.        const QModelIndex & index ) const  
 131.    {  
 132.        //show.bmp是在工程目录中的一张图片（其实就是QQ的图标啦，呵呵）   
 133.        QPixmap pixmap = QPixmap("show.bmp").scaled(24, 24);  
 134.        qApp->style()->drawItemPixmap(painter, option.rect,  Qt::AlignCenter, QPixmap(pixmap)); 
 135.    }  
 136.};  
 137.  
 138.//代理类，把所有单元格中的字符居中显示   
 139.class VIPModel : public QStandardItemModel  
 140.{  
 141.    Q_OBJECT  
 142.public:  
 143.    VIPModel(QObject *parent=NULL) : QStandardItemModel(parent) { }  
 144.    VIPModel(int row, int column, QObject *parent=NULL)  
 145.        : QStandardItemModel(row, column, parent) { }  
 146.    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const 
 147.    {  
 148.        if( Qt::TextAlignmentRole == role )  
 149.            return Qt::AlignCenter;   
 150.        return QStandardItemModel::data(index, role);  
 151.    }  
 152.  
 153.};  
 154.  
 155.#include "main.moc"   
 156.  
 157.int main(int argc, char *argv[])  
 158.{  
 159.    QApplication app(argc, argv);  
 160.  
 161.    VIPModel *model = new VIPModel(5, 5);  
 162.    QTableView *tableView = new QTableView;  
 163.  
 164.    //把表格的背景调成黄蓝相间   
 165.    //这种方法是在网上看到的，用起来还真方便啊   
 166.    tableView->setAlternatingRowColors(true);  
 167.    tableView->setStyleSheet("QTableView{background-color: rgb(250, 250, 115);" 
 168.        "alternate-background-color: rgb(141, 163, 215);}");  
 169.  
 170.    tableView->setWindowTitle("VIP List");  
 171.    tableView->resize(700, 400);  
 172.    tableView->setModel(model);  
 173.    QStringList headerList;  
 174.    headerList << "No." << "ID" << "Name" << "Age" << "Sex" << "Show";  
 175.    model->setHorizontalHeaderLabels(headerList);  
 176.    tableView->verticalHeader()->setVisible(false);  
 177.    tableView->horizontalHeader()->setStretchLastSection(true);  
 178.  
 179.    //为每一列加载委托   
 180.    ReadOnlyDelegate readOnlyDelegate;  
 181.    tableView->setItemDelegateForColumn(0, &readOnlyDelegate);  
 182.    UserIDDelegate userIDDelegate;  
 183.    tableView->setItemDelegateForColumn(1, &userIDDelegate);  
 184.    AgeDelegate spinBoxDelegate;  
 185.    tableView->setItemDelegateForColumn(3, &spinBoxDelegate);  
 186.    SexDelegate comboBoxDelegate;  
 187.    tableView->setItemDelegateForColumn(4, &comboBoxDelegate);  
 188.    IconDelegate iconDelegate;  
 189.    tableView->setItemDelegateForColumn(5, &iconDelegate);  
 190.  
 191.    for(int i=0; i<10; i++)  
 192.    {  
 193.        QModelIndex index = model->index(i, 0, QModelIndex());  
 194.        model->setData(index, i);  
 195.    }  
 196.  
 197.    tableView->show();  
 198.    return app.exec();  
 199.} 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(4498)

sublime的使用

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、 前言

       使用Sublime Text 也有几个年头了，版本也从2升级到3了，但犹如寒天饮冰水，冷暖尽自知。最初也是不知道从何下手，满世界地查找资料，但能查阅到的资料，苦于它们的零碎、片面，不够系统和全面，所以一路走来，耗费了本人大量的时间和精力。所以蒙生了写这篇《Sublime Text 3 全程详细指南》，一来对自己的经验是一个总结，二来可以给初学者做个系统、全面的指引，让他们少走我当时走过的弯路，从而能快速地掌握Sublime Text这个优秀的编辑器。

      目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本，已经相当稳定。所以本文所有讲解均以此版本为准，并以windows 7 x64平台为示例。至于其它的版本也不会有太大的差异。

 

二、 Sublime Text 特点

      1、Sublime Text 是一款跨平台代码编辑器，在Linux、OS X和Windows下均可使用。

      2、Sublime Text 是可扩展的，并包含大量实用插件，我们可以通过安装自己领域的插件来成倍提高工作效率。

      3、Sublime Text 分别是命令行环境和图形界面环境下的最佳选择，同时使用两者会大大提高工作效率。

      4、Sublime Text 为收费软件，建议有能力的人付费使用，以支持开发者。不过不购买也可以一直使用。

 

三、下载与安装

      1、下载：目前官方的正式版本为v2.0.2，我们打开官网下载链接http://www.sublimetext.com/3，下载Sublime Text 3 Build 3083。

 

      其中“Windows 64 bit”下载下来为“Sublime Text Build 3083 x64 Setup.exe”的安装程序；“portable version”下载下来为“Sublime Text Build 3083 x64.zip”编辑器的包，解压后无需安装就能运行。

 

      如果你的电脑平台是windows x86,也就是32位的系统，请点击“Windows”下载32位的安装程序，如果不想安装，就点击其后的“portable version”下载它的32位编辑器包。

 

      2、安装：双击上一步下载下来的“Sublime Text Build 3083 x64 Setup.exe”，记得选择“Add to explorer context menu”，把它加入右键快捷菜单。其它以默认设置安装。

 

      3、安装完毕，双击桌面“Sublime Text 3”快捷图标，打开程序，就可以见到“Sublime Tex的庐山真面目了。

 

      4、如果你不是把“Sublime Text 3”安装在默认路径，比如你把它安装在D盘，请你添加环境变量。

 

四、设置字体及字体大小

      点菜单“Preferences--->Setting - User”，打开“Preferences.sublime-settings”。

 

      如下图添加所需代码，根据自己的喜好进行设置。设置字体用"font_face":"字体名称"，设置字体大小用"font_size":"字体大小"，注意它们之间需要用逗号隔开。

 

五、安装插件

       学习Sublime Text扩展插件的安装前，让我们来先了解一下它的插件官方网站：https://packagecontrol.io/。

 

     当我们在搜索框中输入插件的关键字，相关的插件就会在下面实时显示出来，我们就可以选择自己想要的插件进行了解。

 

1、安装Package Control

      Package Control为插件管理包，所以我们首先要安装它。有了它，我们就可以很方便的浏览、安装和卸载Sublime Text中的插件。

      打开Package Control的网页https://packagecontrol.io/，点击右侧的“Install Now”按钮。

 

进入https://packagecontrol.io/installation#st3页面，选择“SUBLIME TEXT 3”选项卡，复制出里面的代码段：

  

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

      双击桌面“Sublime Text 3”打开程序，快捷键 Ctrl + ` 打开Sublime Text控制台，将之前复制的代码粘贴到控制台里，按下“Eenter”键。

 

      等待其安装完成后关闭程序，重新启动“Sublime Text 3”，点开菜单“Preferences”可见“Package Control”项，说明插件管理包已安装成功。

 

2、ConvertToUTF8 插件安装

      a)功能说明：ConvertToUTF8 能将除UTF8编码之外的其他编码文件在 Sublime Text 中转换成UTF8编码，在打开文件的时候一开始会显示乱码，然后一刹那就自动显示出正常的字体，当然，在保存文件之后原文件的编码格式不会改变。

      b)安装方法一：快捷键 Ctrl+Shift+p ，打开 “Command Palette” 悬浮对话框，在顶部输入 “install”, 然后下选点击 “Package Control:Install Package”。

 

      在出现的悬浮对话框中输入 “convert”, 然后点选下面的 “ConvertToUTF8” 插件，就会自动开始安装，请耐心等待。

 

       当插件安装成功后，Sublime Text 3 编辑器底端的状态栏会有安装成功的提示。

 

 

      c)安装方法二：你还可以下载完整的插件包后解压，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目录下，以达到安装插件的目的。下载地址：https://github.com/seanliang/ConvertToUTF8。

如何找到 Packages 目录？一个快捷的方法是：双击打开你的 “Sublime Text 3”，点菜单 “Preferences--->Browse Packages...”。

 

      它会直接打开插件包存放的目录 “Packages”。然后你就可以把下载后解压好的插件包复制到这个 Packages 目录下。

      当然，如果你熟悉 git，你还可以用 git 从插件的 GitHub 库直接克隆插件包到 Packages 目录下。

 

      备注： 以后所有插件都可以通过以上介绍的两种方法安装，将不再赘述，推荐方法一，使用“ Package Control”安装插件。

 

3、BracketHighlighter 插件

      功能说明：高亮显示匹配的括号、引号和标签。

      插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

 

4、LESS 插件

      功能说明：LESS语法高亮显示。

      插件地址：https://github.com/danro/LESS-sublime

 

5、sublime-less2css 插件

      功能说明：将less文件编译成css文件。

      插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

      辅助工具：安装后从 https://github.com/duncansmart/less.js-windows 下载 less.js-windows，然后配置 less.js-windows 的环境变量。

 

6、Emmet 插件

      功能说明：Emmet的前身是大名鼎鼎的Zen codin。前端开发必备，HTML、CSS代码快速编写神器。

      使用方法：默认快捷键 Tab

      插件地址：https://github.com/sergeche/emmet-sublime

      辅助工具：PyV8 下载地址： https://github.com/emmetio/pyv8-binaries

      注意：Emmet 插件需要 PyV8 插件的支持，所以在安装 Emmet 时，会自动安装 PyV8 插件，如果安装后 Emmet 不能正常保用，很有可能是因为 PyV8 没有安装完全，Sublime Text 2 和 3 容易出现这个问题。你可以删除它，然后手动下载，采用方法二安装 PyV8 插件。

 

      使用方法示例：书写代码 ul#nav>li.item$*8>a{Item $}

 

      然后把光标定在这行代码的最后面，按 Tab 键，就会自动生成：

      <ul id="nav">

              <li class="item1"><a href="">Item 1</a></li>

             <li class="item2"><a href="">Item 2</a></li>

             <li class="item3"><a href="">Item 3</a></li>

             <li class="item4"><a href="">Item 4</a></li>

             <li class="item5"><a href="">Item 5</a></li>

             <li class="item6"><a href="">Item 6</a></li>

             <li class="item7"><a href="">Item 7</a></li>

             <li class="item8"><a href="">Item 8</a></li>

    </ul>

 

 

      更多更详细的使用方法，请查阅 Emmet 官网：http://docs.emmet.io/

 

7、JsFormat 插件

      功能说明：JavaScript代码格式化。

      使用方法：在打开的JavaScript文件里点右键，选择JsFormat。

      插件地址：https://github.com/jdc0589/jsformat

 

8、ColorHighlighter 插件

      功能说明：显示所选颜色值的颜色，并集成了ColorPicker

      插件地址：https://github.com/Monnoroch/ColorHighlighter

 

      在16进制的颜色值上点右键，选择“Choose color”,会弹性颜色拾色器，在需要的色块上单击。

 

 

      看看效果，颜色值和显示颜色都相应做了改变。

 

9、Compact Expand CSS Command 插件

      功能说明：使CSS属性展开及收缩，格式化CSS代码。

      使用方法：按 Ctrl+Alt+[ 收缩CSS代码为一行显示，按 Ctrl+Alt+] 展开CSS代码为多行显示。

      插件地址：https://gist.github.com/vitaLee/2863474 或者：https://github.com/TooBug/CompactExpandCss

 

      快捷键 Ctrl+Alt+[ 收缩CSS代码为效果： 

 

      快捷键 Ctrl+Alt+] 展开CSS代码为多行显示效果：

 

10、SublimeTmpl 插件

      功能说明：快速生成文件模板。

      使用方法：SublimeTmpl默认的快捷键如下，如果快捷键设置冲突可能无效。

                    Ctrl+Alt+h              新建 html 文件

                    Ctrl+Alt+j               新建 javascript 文件

                    Ctrl+Alt+c               新建 css 文件

                    Ctrl+Alt+p              新建 php 文件

                    Ctrl+Alt+r               新建 ruby 文件

                    Ctrl+Alt+Shift+p     新建 python 文件

      插件地址：https://github.com/kairyou/SublimeTmpl

 

      下图为按快捷键 Ctrl+Alt+h 新建的一个 html 文件。

 

      相应的模板为tmpl格式的文件，它们保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

 

      当然你可以根据自己的喜好来更改模板格式。例如把“html.tmpl”改为早期的html标准格式后保存。

 

      现在按快捷键 Ctrl+Alt+H，新建一个 html 文件，其格式就和更改后模板格式完全一样了。如下图：

 

      新增语言：你还可以增加模板文件夹中没有的文件模板，并做相应的设置来使用这一功能。具体可以参考它的中文文档：http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

 

11、Alignment 插件

      功能说明：使代码格式的自动对齐。

      使用方法：快捷键Ctrl+Alt+A，可能与QQ截图冲突，二者中的一个要重置快捷键。

      插件地址：https://github.com/kevinsperrine/sublime_alignment

 

12、AutoFileName 插件

      功能说明：自动补全文件(目录)名。

      插件地址：https://github.com/BoundInCode/AutoFileName

 

      安装好后就可以来测试如何使用AutoFileName，先以<link>css档案来示范，当输入href=””的同时，Sublime Text就会将现在编辑档案的路径为中心，判断该路径内的所有档案。

      a)以这个档案为范本它会去抓取跟abc.html在同一层的档案列表。

 

      像我们这次要link的是在css资料夹内的auto.css，所以我们直接衔接打上css/，就会跑出css资料夹内的档案，整个用法以此类推

 

      b)像是<img src=””>的部分也是一样的方式，没什么困难了，弄懂一下路径就好了。

 

     c)再来看看是css档中要用url，也是用同样方式，只不过因为要连到上一层的images资料夹内的arrow.png，所以就前面打..(上层)，依序去选择路径即可。

 

13、DocBlockr 插件

      功能说明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust语言函数注释。

      使用方法：在函数上面输入/** ,然后按 Tab 就会自动生成注释。

      插件地址：https://github.com/spadgos/sublime-jsdocs

 

      在函数上面输入/** ,然后按Tab 就会自动生成注释。

 

14、SublimeCodeIntel 插件

      功能说明：智能提示。

      插件地址：https://github.com/SublimeCodeIntel/SublimeCodeIntel

 

15、HTML-CSS-JS Prettify 插件

      功能说明：HTML、CSS、JS格式化。

      插件地址：https://github.com/victorporof/Sublime-HTMLPrettify

      安装方法：安裝这个套件前必须先安裝node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify。

      使用方法一：View -> Show console 或者使用快捷键(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然后按下Enter。

 

      使用方法二：默认快捷键：Ctrl+Shift+H。

                       你也可以自行设置快捷键，菜单 “Preferences---> Key Bindings – User” 里新增： 

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

 

       完成后保存，以上代码设定执行此插件的快捷键是：Ctrl+Shfit+O，自己设定的话就要测试一下，不要跟其他快捷键冲突。

 

      格式化前：

 

      格式化后：

 

16、SideBarEnhancements 插件

      功能说明：侧栏菜单扩充功能。

      插件地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

 

17、View In Browser 插件

      功能说明：Sublime Text保存后网页自动同步更新。

      插件地址：https://github.com/adampresley/sublime-view-in-browser

      使用方法：在打开的文档任一处点右键，选择“View In Browser”，就会用默认的浏览器自动打开该文件。

 

      如果你电脑装有多个浏览器，你想换其它的作为此操作的默认浏览器，你可以按以下方法设置：

 

      打开“View In Browser.sublime-settings”，写入以下代码： 

{
    "browser": "chrome64"
}

 

      这样你就把它默认设置为“Chrome”浏览器了，当然你还可以改成“Firefox”、“Safari”等等，前提是你的电脑事先已安装好了这些浏览器。

 

18、LiveReload 插件

      功能说明：调试网页实时自动更新。

      使用说明：快捷键 Ctr+Alt+V

      插件地址：https://github.com/dz0ny/LiveReload-sublimetext2

 

      同时Chrome浏览器也要安装LiveReload 的扩展插件。

 

19、TortoiseSVN 插件(win下需要安装有TortoiseSVN客户端支持)

      功能说明：版本控制工具。

      插件地址：https://github.com/dexbol/sublime-TortoiseSVN

 

20、Theme-Soda 插件

      功能说明：的 Sublime Text 主题之一。

      插件地址：https://github.com/buymeasoda/soda-theme

      安装完成后，点菜单 Preferences--->Settings - User，根据需要的主题效果，添加如下代码。

      Soda 亮色主题请添加： 

{
    "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

     

      Soda 暗色主题请添加： 

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

 

 

      要达到图中的效果，你还需要下载与之搭配的 color scheme。下载地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip，如果你喜欢 Soda Dark 和 Monokai，我建议你使用 Monokai Extended。这个 color scheme 是 Monokai Soda 的增强，再配合 Markdown Extended ，将大大改善 Markdown 的语法高亮。

 

      如果加代码 "soda_classic_tabs":true，文件标签页形状会如下显示：

 

      如果不添加此行代码，文件标签页形状会如下显示：

 

21、Theme-Flatland 插件

      功能说明：的 Sublime Text 主题之一。

      插件地址：https://github.com/thinkpixellab/flatland

 

22、Theme-Nexus 插件

      功能说明：的 Sublime Text 主题之一。

      插件地址：https://github.com/EleazarCrusader/nexus-theme

 

 

六、插件列表

    快捷键 Ctrl+Shift+P，在对话框中输入“list”，选择“Package Control:List Packages”。

      会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

 

七、移除插件

      有时候我们需要移除自己不想要的插件，具体操作如下：快捷键 Ctrl+Shift+P，在对话框中输入“remove”，选择“Package Control: Remove Packages”。

 

      然后在出现的插件列表中点选你要移除的插件。

 

八、Sublime Text 的窗口操作

1、分屏

      Sublime Text有多种分屏形式，让我来具体地看一看。菜单 “View-àLayout”就可以选择你的分屏样式。

 

      对应的快捷键与分屏情况如下：

      Alt+Shift+1       Single             独屏

      Alt+Shift+2       Columns:2      纵向二栏分屏

      Alt+Shift+3       Columns:3      纵向三栏分屏

      Alt+Shift+4       Columns:4      纵向四栏分屏

 

      Alt+Shift+8       Rows:2          横向二栏分屏

      Alt+Shift+9       Rows:3          横向三栏分屏

 

      Alt+Shift+5       Grid              四格式分屏

 

2、创建新窗

      快捷键Ctrl+Shift+N 创建一个新窗口。

 

九、使用技巧荟萃

 （未完待续。。。。。。）

 

 

 

 

 

 

 

 

 

十、Sublime Text 快捷键列表

      快捷键按类型分列如下：

1、通用

      ↑↓← →    上下左右移动光标

      Alt    调出菜单

      Ctrl + Shift + P    调出命令板（Command Palette）

      Ctrl + `    调出控制台

2、编辑

      Ctrl + Enter    在当前行下面新增一行然后跳至该行

      Ctrl + Shift + Enter    在当前行上面增加一行并跳至该行

      Ctrl + ←/→    进行逐词移动

      Ctrl + Shift + ←/→    进行逐词选择

      Ctrl + ↑/↓    移动当前显示区域

      Ctrl + Shift + ↑/↓    移动当前行

3、选择

      Ctrl + D    选择当前光标所在的词并高亮该词所有出现的位置，再次 Ctrl + D 选择该词出现的下一个位置，在多重选词的过程中，使用 Ctrl + K 进行跳过，使用 Ctrl + U 进行回退，使用 Esc 退出多重编辑

      Ctrl + Shift + L    将当前选中区域打散

      Ctrl + J    把当前选中区域合并为一行

      Ctrl + M    在起始括号和结尾括号间切换

      Ctrl + Shift + M    快速选择括号间的内容

      Ctrl + Shift + J    快速选择同缩进的内容

     Ctrl + Shift + Space    快速选择当前作用域（Scope）的内容

4、查找&替换

      F3    跳至当前关键字下一个位置

      Shift + F3    跳到当前关键字上一个位置

      Alt + F3    选中当前关键字出现的所有位置

      Ctrl + F/H    进行标准查找/替换，之后：

      Alt + C    切换大小写敏感（Case-sensitive）模式

      Alt + W    切换整字匹配（Whole matching）模式

      Alt + R    切换正则匹配（Regex matching）模式

      Ctrl + Shift + H    替换当前关键字

      Ctrl + Alt + Enter    替换所有关键字匹配

      Ctrl + Shift + F    多文件搜索&替换

5、跳转

      Ctrl + P    跳转到指定文件，输入文件名后可以：

      @ 符号跳转    输入@symbol跳转到symbol符号所在的位置

      # 关键字跳转    输入#keyword跳转到keyword所在的位置

      : 行号跳转    输入:12跳转到文件的第12行。

      Ctrl + R    跳转到指定符号

      Ctrl + G    跳转到指定行号

6、窗口

      Ctrl + Shift + N    创建一个新窗口

      Ctrl + N    在当前窗口创建一个新标签

      Ctrl + W    关闭当前标签，当窗口内没有标签时会关闭该窗口

      Ctrl + Shift + T    恢复刚刚关闭的标签

7、屏幕

      F11    切换至普通全屏

      Shift + F11    切换至无干扰全屏

      Alt+Shift+1       Single             切换至独屏

      Alt+Shift+2       Columns:2      切换至纵向二栏分屏

      Alt+Shift+3       Columns:3      切换至纵向三栏分屏

      Alt+Shift+4       Columns:4      切换至纵向四栏分屏

      Alt+Shift+8       Rows:2          切换至横向二栏分屏

      Alt+Shift+9       Rows:3          切换至横向三栏分屏

      Alt+Shift+5       Grid              切换至四格式分屏

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3593)

JavaScript对象、JSON对象、JSON字符串的区别

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

JavaScript对象、JSON对象、JSON字符串的区别

一、首先看下什么是JSON

JSON：JavaScript Object Natation，JavaScript对象的表现形式，已经发展成一种轻量级的数据交换格式。

JavaScript对象的表现形式，指定义JS对象的一种方式。
数据交换格式，即用于交换的数据格式。

JSON是种格式：

数据在键值对中, 数据由逗号分隔, 花括号保存对象, 方括号保存数组.
键值对组合中的名称写在前面，值对写在后面，中间用冒号隔开
JSON 值可以是： 数字, 字符串, 逻辑值, 数组, 对象, null

JSON与XML相比，JSON更轻量级，XML更重量级，目前XML更多的用作配置文件。

 

二、再来看下什么是javascript对象

虽然有人说JavaScript 中的所有事物都是对象，但是 javascript 中，并不是所有的值都是对象，而有两种值类型：原始值和对象。
（参考：http://blog.csdn.net/justjavac/article/details/8432989 JavaScript 并非所有的东西都是对象）

JavaScript原始值:
字符串，数字，布尔值，null，正则表达式
注：在 JavaScript 中所有的数字都是浮点数

JavaScript内置对象：
Object(基础对象)，
Array(数组)，
Function(函数构造器)，
Math(数学对象)，
String(字符串对象)，
Number(数值对象)，
Boolean(布尔对象)，
Date(日期时间)，
Error(异常对象)，
RegExp(正则表达式对象)，
Arguments(函数参数集合)
(参考：http://www.cnblogs.com/lianzi/archive/2011/08/26/2154253.html javascript内置对象列表及Array和String的常用方法)

其中 Boolean, Number, String 是原始值的包装器，很少直接使用

JavaScript 创建对象的方法：
1）使用内置对象
var person=new Object();//创建基础对象实例，然后为其添加属性
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
2）自定义对象构造
function Person(firstname,lastname,age){//自定义对象构造器，然后创建实例
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
}
var person=new Person("Bill","Gates",56);
//定义对象构造器，可以使用“this”关键字构造、也可以使用原型prototype构造
（参考：http://www.jb51.net/article/20428.htm JavaScript 三种创建对象的方法）
3）使用直接量(literals 有直接量、字面量、常量等词义)
var arr = [obj.a, 0, obj.a+1];
var obj = {name: 'John' + 'McCarthy'};

注：
准确的说不叫直接量（literals），而叫初始器（Initialiser），可以在里面使用表达式
初始器有对象和数组两种，所以有“对象直接量”，“数组直接量”这样的说法

初始器基于JSON，要符合JSON语法格式，
因此有人说JSON是JavaScript的原生格式,
在JavaScript中处理JSON数据不需要任何特殊的API或者工具包

但是初始器里面是可以有表达式的，就像例子里的一样
（参考：http://www.cnblogs.com/snandy/p/3439790.html JavaScript中的直接量与初始器的区别）

原始值只包括字符串，数字，布尔值，null，正则表达式，不包括 Undefined 和 Initialiser

 

三、JavaScript对象、JSON对象、JSON字符串

javascript对象：javascript中，除开JavaScript原始值(字符串，数字，布尔值，null，正则表达式)的都是javascript对象

JSON对象：JSON对象这种叫法不太准确，可以理解为使用基于JSON的初始器定义的javascript对象

JSON字符串：符合JSON语法格式的字符串

 

 

javascript对象和JSON字符串相互转换：
1：jQuery插件支持的转换方式
$.parseJSON( jsonstr );$("xxx").serializeArray();
2：浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器
JSON.parse(jsonstr);JSON.stringify(jsonobj);
3：Javascript支持的转换方式
eval('(' + jsonstr + ')');//不推荐
4：JSON官方的转换方式
引入 json.js 或 json2.js,用法同第二种
（参考：http://www.cnblogs.com/luminji/p/3617160.html JS中对象与字符串的互相转换)

 

JAVA对象和JSON字符串相互转换：
可以用jackson、Gson和json-lib等
（参考：http://www.blogjava.net/bolo/archive/2014/04/16/412533.html 使用jackson对Java对象与JSON字符串相互转换的一些总结）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(3278)

C#-XML基础 使用浏览器检查手写的xml文件是否正确

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

慈心积善融学习，技术愿为有情学。善心速造多好事，前人栽树后乘凉。我今于此写经验，愿见文者得启发。


  •    .NET Framework : 4.6.1
  •                           ide : visual studio 2017 community
  •                             os : win7 x86_64
  •            type setting : markdown
  •                         blog : https://blog.csdn.net/yushaopu
  •                     github : https://github.com/GratefulHeartCoder


xml file - 正确的文件 

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100" comment="good-t"> <book> <name>道德经</name> <author>老子</author> </book> <book> <name>文始真经</name> <author>关尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金刚经</name> <author>释迦牟尼</author> </book> <book> <name>地藏菩萨本愿经</name> <author>地藏</author> </book> </buddhism> </cultures>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    •

使用浏览器进行校验

这里写图片描述


xml file - 错误的 

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100 comment="good-t" <book> <name>道德经</name> <author>老子</author> </book> <book> <na>文始真经</name> <author>关尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金刚经</name> <author>释迦牟尼</author> </book> <book> <name>地藏菩萨本愿经</name> <author>地藏</author> </book> </buddhism> </cultures>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    •

使用浏览器进行校验

这里写图片描述


感想

xml文件挺常用的，用程序自动生成的xml文件最好，引号和尖括号等标点符号肯定是全的。把事情交给擅长它的人去做。知人善任！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3439)

React Native第三方组件库汇总

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

移动跨平台框架React Native经过4年的发展，其生态已经变得异常丰富，在使用React Native开发项目的过程中，为了提高开发效率，我们经常会借鉴一些使用使用率比较高的开源库，根据大众的需求，对这些使用较高的 React-Native UI 库，我们做一个简单的总结和归类，方便大家更好地入门 React Native。

本文只是收集了一些常见的UI库和功能库，除了上面介绍的知名第三方库之外，还有很多实现小功能的库，这些库可以大大的提高我们的开发效率，并且可以在此基础上进行二次开发。并且欢迎大家关注我的《React Native移动开发实战》，第二版修改版会再近期再版，欢迎持续关注。

第三方库

UI套件

1， NativeBase

NativeBase 是一个广受欢迎的 UI 组件库，为 React Native 提供了数十个跨平台组件。在使用 NativeBase 时，你可以使用任意开箱即用的第三方原生库，而这个项目本身也拥有一个丰富的生态系统，从有用的入门套件到可定制的主题模板。 
NativeBase 项目地址: https://github.com/GeekyAnts/NativeBase 
入门学习地址: https://reactnativeseed.com/

2，React Native Elements

React Native Elements是一个高度可定制的跨平台 UI 工具包，完全用 Javascript 构建。该库的作者声称“React Native Elements 的想法更多的是关于组件结构而不是设计，这意味着在使用某些元素时可以减少样板代码，但可以完全控制它们的设计”，这对于开发新手和经验丰富的老手来说都很有吸引力。 
React Native Elements 项目地址: 
https://github.com/react-native-training/react-native-elements 
React Native Elements 示例项目： 
https://react-native-training.github.io/react-native-elements/

3，Shoutem

Shoutem也是一个 React Native UI 工具包，由 3 个部分组成：UI 组件、主题和组件动画。该库为 iOS 和 Android 提供了一组跨平台组件，所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式，这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

项目地址：https://shoutem.github.io/ui/

4， UI Kitten

UI Kitten这个库提供了一个可定制和可重复使用的 react-native 组件工具包，该工具包将样式定义移到特定位置，从而可以单独重用组件或为组件设置样式。通过传递不同的变量，可以很容易地“动态”改变主题样式。 
项目地址: https://github.com/akveo/react-native-ui-kitten 
项目体验地址：https://expo.io/@akveo/ui-kitten-explorer-app

5，React Native Material UI

React Native Material UI是一组高度可定制的 UI 组件，实现了谷歌的 Material Design。请注意，这个库使用了一个名为 uiTheme 的 JS 对象，这个对象在上下文间传递，以实现最大化的定制化能力。

React Native Material UI 项目地址: 
https://github.com/xotahal/react-native-material-ui 
包含库组件及示例的清单： 
https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md

6，React Native Material Kit

React Native Material Kit是一套很有用的 UI 组件和主题，实现了谷歌的 Material Design。不过需要说明的是， React Native Material Kit在2017 年 12 月之后就停止维护了。 
项目地址: https://github.com/xinthink/react-native-material-kit

7，Nachos UI

Nachos UI 是一个 React Native 组件库，提供了 30 多个可定制的组件，这些组件也可以通过 react-native-web 在 Web 上运行。它通过了快照测试，支持格式化和 yarn，提供了热火的设计和全局主题管理器。 
项目地址: https://github.com/nachos-ui/nachos-ui

8，React Native UI Library

Wix 工程公司正致力于开发这个进的 UI 工具集和组件库，它还支持 react-native-animatable 和 react-native-blur。这个库附带了一组预定义的样式预设（转换为修饰符），包括 Color、Typography、Shadow、Border Radius 等。 
项目地址: https://github.com/wix/react-native-ui-lib 
这里写图片描述

9，React Native Paper

React Native Paper是一个跨平台的 UI 组件库，它遵循 Material Design 指南，提供了全局主题支持和可选的 babel 插件，用以减少捆绑包大小。 
React Native Paper 项目地址: 
https://github.com/callstack/react-native-paper

Expo 示例应用程序： 
https://expo.io/@satya164/react-native-paper-example

10，React Native Vector Icons

React Native Vector Icons是一组 React Native 的可定制图标，支持 NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用，而且被数千个应用程序以及其他 UI 组件库（如 react-native-paper）所使用。 
项目地址: https://github.com/oblador/react-native-vector-icons 
示例项目：https://oblador.github.io/react-native-vector-icons/

11，Teaset

Teaset是一个 React Native UI 库，提供了 20 多个纯 JS（ES6）组件，用于内容显示和动作控制。虽然它的文档不够详尽，但它简洁的设计吸引了我的眼球。 
项目地址：https://github.com/rilyu/teaset

其他库

1，antd-mobile

antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库，这个组件库拥有很多使用的组件。 
这里写图片描述 
项目地址：https://github.com/ant-design/ant-design-mobile

2，react-native-button

react-native-button是github上一个开源的button组件，目前仍保持比较快的更新频率，提供比较丰富的Button功能。 
项目地址：https://github.com/ide/react-native-button

3，react-native-image-viewer

react-native-image-viewer是一个图片大图浏览的库，点击图片可以放大缩小。 
这里写图片描述 
项目地址：https://github.com/ascoders/react-native-image-viewer

4，react-native-image-picker

react-native-image-picker是实现多个图像选择、裁剪、压缩等功能的第三方库，可以使用该库实现图片、照相等操作。 
这里写图片描述 
项目地址：https://github.com/react-community/react-native-image-picker

5，react-native-picker

react-native-picker是React native最常见的滚轮控件，可以实现单滚轮、双滚轮和三滚轮效果。 
这里写图片描述 
项目地址：https://github.com/beefe/react-native-picker

6，react-native-scrollable-tab-view

react-native-scrollable-tab-view是一个带有TabBar和可切换页面的控件。，在Android中可以看成是ViewPager和TabLayout的结合。 
项目地址：https://github.com/happypancake/react-native-scrollable-tab-view

7，react-native-app-intro

react-native-app-intro是实现引导页的库，当然开发者也可以自己手动实现。

项目地址：https://github.com/fuyaode/react-native-app-intro

8，3D Touch

3D Touch是实现React native 3D Touch的库，可以用此库很方便的实现3D Touch。效果如下： 
这里写图片描述 
项目地址：https://github.com/jordanbyron/react-native-quick-actions

react-native-snap-carousel是可以实现复杂效果的轮播图库，实现的效果如下： 
这里写图片描述 
除此之外，还可以实现Galley效果等多种效果。 
项目地址：https://github.com/archriss/react-native-snap-carousel

10，react-native-blur

react-native-blur是专门用于实现毛玻璃效果的。 
项目地址：https://github.com/react-native-community/react-native-blur

11，react-native-actionsheet

react-native-actionsheet是实现底部弹框的组件，可以在Android和iOS平台上共用，当然也可以自己封装实现。 
这里写图片描述 
项目地址：https://github.com/beefe/react-native-actionsheet

12，react-native-popover

react-native-popover是React Native开发中常见的弹出提示框操作，其效果如下图所示： 
这里写图片描述

13，react-native-charts-wrapper

图表在移动开发中应用的场景可谓非常多，这里介绍一款使用的比较多的库。 
这里写图片描述
项目地址：https://github.com/wuxudong/react-native-charts-wrapper

14，react-native-spinkit

react-native-spinkit是一个很炫的加载动画第三方库，可以根据实际情况定制加载的动画。 
这里写图片描述 
https://github.com/maxs15/react-native-spinkit

15，Facebook Design-iOS 10 iPhone GUI

Facebook Design-iOS 10 iPhone GUI是iOS 10 公开版的 GUI 元素模板，包括 Sketch、Photoshop、Figma、XD 和 Craft。 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(5311)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档