Da'sBlog

发表于 | 分类于

移动端滚动插件iScroll

目录：

1iScroll的产生2iScroll的使用方法3iScroll应该如何实例化4iScroll中的参数5iScroll中的方法
概述：

大家在日常工作中最常用的插件是什么，jQurey？Lazyload？但是这些都是在PC端，但是在移动端最常用的插件莫过于iScroll了，iScroll到底是什么东西，应该怎么用？iScroll是个很强大的插件，我也只是略懂皮毛，这里我们简单的介绍一下。
iScroll的产生：

iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。
iScroll的使用方法：

iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这个区域内的第一个DOM结构会被实例化，其包裹的内容可以纵向或者横向的滚动，所以在使用iScroll的时候，滚动元素要尽量的简单，减少DOM个数，减少嵌套，因为DOM结构越是复杂iScroll运行起来就越是吃力，有可能会造成某些节点显示不正常的情况。 所以，推荐使用的DOM结构如下：

1
2
3
4
5
6
7
8
9
<div id="wrapper">//overflow:hidden;
    <ul>
    //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动，
    //多出的内容会被wrapper的样式hidden。
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

注意：再次重申，只有wrapper里的第一个子元素（ul）才可以被实例化滚动，并且要结合外层的DOM（wrapper）才能实现滚动。
如果 wrapper中有多个ul怎么办？很简单，记住那句话，只有wrapper里的第一个子元素（ul）才可以被实例化滚动：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="wrapper">//overflow:hidden;
    <div id="first">
        //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动，
        //多出的内容会被wrapper的样式hidden
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</div>

看到了吧，只有first会被实例化。 注意：这里第一个DOM结构的ID（first）可以不写，我只是为了方便大家识别才写了个ID，但是最外层的ID（wrapper）一定要写，因为在JS实例化的时候需要填写这个ID：

1
var myScroll = new iScroll("wrapper");

iScroll应该如何实例化：

既然说道了实例化，我们应该在什么时候实例化？据说实例化的方法有很多，但是我没用过，我只说一种：

（1）在HTML（uw3c.html）页面底部（body之后html之前）加载iscroll.js与当前页面的uw3c.js,这样能确保HTML的DOM结构能加载出来。

（2）在JS插入页面DOM结构和数据之前实例化iScroll，也就是在JS的最开始实例化，因为之后可能会使用JS来插入DOM或者数据，这样以来能确保在插入数据之前iScroll已经实例化了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
HTML://HTML结构
<html >
    <body>
     ...code...
    </body>
     //插入iscroll.js文件
   <script type="text/javascript" src="js/iscroll.js" > </script >
    //插入本页面JS文件
  <script type="text/javascript" src="js/uw3c.js" > </script >
</html>
 JS://JS文件内容
 var myscroll;
 function iscroll(data){
      //实例化iScroll
     myscroll=new iScroll("wrapper");
     pageData(data);
 }
 function pageData(obj){
     $("body").html(obj);
     myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
 }
 iscroll("<div>pagedata</div>");

iScroll中的参数：

在实例化iScroll的时候，可以传入两个参数，第一个参数是实例化的外层的DOM的ID，第二个参数是iScroll执行方法的对象：

1
var myscroll=new iScroll("wrapper",{hScrollbar:false});

或者

1
2
3
4
5
6
var opts = {
                vScroll:false,//禁止垂直滚动
                snap:true,//执行传送带效果
                hScrollbar:false//隐藏水平方向上的滚动条
            };
var myscroll = new iScroll("wrapper",opts);

第二个参数内容如下，这个参数会控制iScroll的效果：

1
2
3
4
5
6
7
8
9
10
11
12
hScroll        false 禁止横向滚动 true横向滚动 默认为true
vScroll        false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar     false隐藏水平方向上的滚动条
vScrollbar     false 隐藏垂直方向上的滚动条
fadeScrollbar  false 指定在无渐隐效果时隐藏滚动条
hideScrollbar  在没有用户交互时隐藏滚动条 默认为true
bounce         启用或禁用边界的反弹，默认为true
momentum       启用或禁用惯性，默认为true，
               此参数在你想要保存资源的时候非常有用
lockDirection  false取消拖动方向的锁定，
               true拖动只能在一个方向上（up/down 或者left/right）
iScroll中的方法：

当然在第二个参数中，也有一些方法可以执行：

(1)scrollTo(x, y, time, relative)方法：传入4个参数：X轴滚动距离，Y轴滚动距离，效果时间，是否相对当前位置。所以例如：

1
2
3
4
//在200毫秒的时间内，Y轴向上滚动100像素；
uw3c.scrollTo(0, -100, 200)
//在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素；
uw3c.scrollTo(-100, 0, 200, true)

(2)refresh()方法：在DOM结构发生改变之后，需要刷新iScroll，否则滚动插件会实例化的不准确：

uw3c.refresh();//刷新iScroll

(3)onPosChange,有没有一个方法能返回位置的变化？你可以查询一下自己所用的iScroll中有没有onPosChange方法：

1
2
3
4
5
6
7
8
onPosChange:function(x,y){
    if(y < -200){
     //如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
        $("#uw3c").show();
    }else{
        $("#uw3c").hide();
    }
}

（4）onScrollEnd：滚动结束时执行的事件，如果想在滚动结束时出发摸个事件，这个方法就拍上用处了：

1
2
3
4
//滚动结束后，执行的方法，滚动后会出现提示框alert("uw3c.com")
onScrollEnd:function(){
    alert("uw3c.com");
}

（5）onRefresh：在DOM结构发生改变之后，需要刷新iScroll，否则滚动插件会实例化的不准确，onRefresh是刷新完iScroll会执行的方法。
（6）onBeforeScrollStart：开始滚动前的时间回调，默认是阻止浏览器默认行为 。
（7）onScrollStart：开始滚动的回调。
（8）onBeforeScrollMove：在内容移动前的回调。
（9）onScrollMove：内容移动的回调。
（10）onBeforeScrollEnd：在滚动结束前的回调。
（11）onTouchEnd：手离开屏幕后的回调。
（12）onDestroy：销毁实例的回调。

阅读全文 »
Da'sBlog

发表于

一致
Consistency

反馈
Feedback

效率
Efficiency

可控
Controllability

关于导航的设计

如果导航较多 可以左侧分类
如果导航较少 可以顶部导航

主色 辅助色 中性色
主场景 主要表现
副场景 表现用途
边框 文字 表现层次

var arr = [2, 3, 4];
var checkNum = 2;
arr.filter((function(checkNum) {

    return function(num) {

        return num > checkNum;
    }
})(checkNum))

isright = !false;
var cb = isright? (isright++) : 10;
console.log(cb)
console.log(isright)

methods: {
queryData(queryString, cb) {
let citys = this.citys
var result = queryString ? citys.filter(((queryString) => {
return (city) => {
return city.value.indexOf(queryString.toLowerCase()) == 0
}
})(queryString)) : citys
cb(result)
},
selectCity(item) {
console.log(item)
}

}
阅读全文 »
Da'sBlog

发表于 | 分类于

利用docker实现mysql主从同步/读写分离

为了保证数据的完整和安全，mysql设计了主从同步，一个挂掉还可以用另个。最近重构论坛，想来改成主从吧。担心失误，就先拿docker练练手。
有错误或者不理解的地方，可以联系本人邮箱sunhaokk@qq.com。

通过本文实际你会操作到。

  1. mysql的主从同步
  2. docker镜像和容器的创建
  3. docker容器间的数据传递
  4. mycat入门

以下需要大于100的智商和mysql基础docker基础，linux基础。

没有也没事，就是看着会有点吃力。

环境是centos，mycat是1.6.docker是1.12.6

下载mysql镜像。

docker pull mysql


ps:如果下载太慢，请添加腾讯源,依次执行

1
echo "OPTIONS='--registry-mirror=https://mirror.ccs.tencentyun.com'" >> /etc/sysconfig/docker
1
systemctl daemon-reload
1
service docker restart

或者直接去阿里仓库下https://dev.aliyun.com/search.html把上面的--registry-mirror=https://mirror.ccs.tencentyun.com换成你的专属源就可以

下载完输入

docker images

1
2
REPOSITORY                  TAG                 IMAGE ID            CREATED             SIZE
docker.io/mysql             latest              44a8e1a5c0b2        8 days ago          407 MB

利用mysql镜像，创建用于主从同步的两个新镜像。

我们当前所在的服务器叫宿主服务器，

我们要利用docker 虚拟两个docker容器服务器，一个主服务器，一个从服务器。

阅读全文 »
Da'sBlog

发表于 | 分类于

原文链接:http://www.ydcss.com/archives/424

gulp.src(globs[, options])

说明：src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件；

globs： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

通配符路径匹配示例：

“src/a.js”：指定具体文件；

“”：匹配所有文件 例：src/.js(包含src下的所有js文件)；

“”：匹配0个或多个子文件夹 例：src//*.js(包含src的0个或多个子文件夹下的js文件)；

“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

阅读全文 »
Da'sBlog

发表于 | 分类于

这里的vue生命周期指的是一个组件创建到销毁的过程。

当组件激活 触发beforeCreate，Create，beforeMount，Mount
当组件不再显示销毁时，触发beforeDestroy，Destroy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <h3>Let's check out the lifecycle of this hur' child.</h3>
  <h4>Check the console!</h4>
  <button @click="toggleShow">
    <span v-if="isShowing">Hide child</span>
    <span v-else>Show child</span>
  </button>
  <hr>
  <div v-if="isShowing">
    <app-child></app-child>
  </div>
</div>
<script type="text/x-template" id="childarea">
  <div>
  	<h4>Here I am!</h4>
  </div>
</script>
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
body {
  font-family: 'Bitter', serif;
}
#app {
  text-align: center;
  margin: 60px;
  max-width: 320px;
  margin: 0 auto;
  display: table;
}
.num {
  color: #AF007E;
}
button {
  font-family: 'Bitter';
  background: #c62735;
  color: white;
  border: 0;
  padding: 5px 15px;
  margin: 0 10px;
  border-radius: 4px;
  outline: 0;
  cursor: pointer;
}
h4 {
  margin: 0 0 15px;
}
hr {
  border-color: #F2FAFF;
  opacity: 0.5;
  margin: 15px 0;
}
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
const Child = {
  template: '#childarea',
  beforeCreate() {
    console.log("beforeCreate!");
  }, 
  created() {
    console.log("created!");
  }, 
  beforeMount() {
    console.log("beforeMount!");
  }, 
  mounted() {
    console.log("mounted!");
  }, 
  beforeDestroy() {
    console.log("beforeDestroy!");
  }, 
  destroyed() {
    console.log("destroyed!");
  }
};
new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});
阅读全文 »
Da'sBlog

发表于 | 分类于

“build-env”: “rimraf dist && set NODE_ENV=production&& webpack”,

切记 set NODE_ENV=production
其中=号不要隔开,不然会出错。因为这个是设置DOS下的环境

阅读全文 »
Da'sBlog

发表于 | 分类于

首先说下相关概念:

明文：需要秘密传送的消息。

密文：明文经过密码变换后的消息。

加密：由明文到密文的变换。

解密：从密文恢复出明文的过程。

破解：非法接收者试图从密文分析出明文的过程。

加密算法：对明文进行加密时采用的一组规则。

解密算法：对密文进行解密时采用的一组规则。

密钥：加密和解密时使用的一组密码信息。

对称加密：是采用单钥密码系统的加密方法，使用同一密钥对信息进行加密和解密的加密方法。

非对称加密：需要两个密钥：公共密钥和私有密钥，它们成对出现，公钥加密的数据有且只有私钥能解密，私钥加密的数据有且只有公钥解密，相对于“对称加密”，“非对称加密”加密方法加密和解密使用不同的密钥，所以叫“非对称加密”加密方法。

对称加密和非对称加密的区别：在于加密和解密是否使用的同一个密钥。

阅读全文 »
Da'sBlog

发表于 | 分类于

最近安装测试环境需要安装webpack1版本。但是用cnpm安装的时候默认已经是2.6.1了

那么我们怎么安装指定版本呢。

Semver语义化版本控制规范

首先node采用semver规范，感兴趣的可以研究下。在这我们要明白版本号。
http://semver.org/lang/zh-CN/

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：
主版本号：当你做了不兼容的API 修改，
次版本号：当你做了向下兼容的功能性新增，
修订号：当你做了向下兼容的问题修正。
先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸
例如1.2.19 1是版本号 ，2是次版本号，19是修订号

阅读全文 »