放弃手机的第三天我在做什么

今天还是有蛮多想法想去实践的，不过早上在写JWT的时候，看到有个叫做RFC的概念。RFC有点类似IEEE，只不过RFC制订的标准都是互联网的标准，自1969年起，至今已经有8000多份标准得到认可，中国大陆也曾经提供过一份关于中文在互联网上的一个统一规范标准RFC1922，有兴趣的同学可以点击阅读一下。

RFC的全部文件索引目录在这：https://tools.ietf.org/rfc/index，由于文件巨多，所以加载完整个页面需要很长的时间，索性我就写了个爬虫把8000多份的编号、标题、简介等信息都爬取到数据库存着，打算写个页面以供查询。

这个查询页面我已经上传到我的实验室环境：https://lab.ghyer.com/rfc/，每次点进去都会随机生成12份文档。

今天的重点是学习了axios以及jquery和css的一些高能操作。

最开始我的想法是要能呈现鼠标放置在上面有浮起来的一个视觉效果，如果是静态的只需要在css加一句box-shadow并且调节参数即可，但我想的是互动，而不是僵硬的一个状态，于是我尝试使用jquery完成这个事情。

jquery提供了.mouseover的操作可以判断鼠标是否停留在某个块上，这样我就能在判断完成后进行样式的添加，样式添加可以单独采用.toggleClass或者是.addClass和.removeClass的协作方式，这个效果不是很好，会有阶跃的效果出现。如下图：

$('.hello').mouseover(function() {

$(this).toggleClass("box-shadow");

}).mouseout(function() {

$(this).toggleClass("box-shadow");

})

</script>

/** css.css **/

body {

background: #f3f3f3;

}

.hello {

width: 100px;

height: 100px;

border-radius: 10px;

background: white;

margin: 40px;

}

.box-shadow {

box-shadow: 4px 4px 10px #dddddd;

}

可以很明显看到它的阶跃很强，没有平滑的过渡感。在搜索解决方案的过程中，发现有个css里有个选择器叫做 :hover，这个是专门解决这种需求的一个选择器。另外还要搭配transition使用。hover是用于解决鼠标放上去时给该块添加什么样式的，而transition是用于解释某个样式呈现的速度。例如：transition: box-shadow 180ms;可以在box-shadow的样式出现时，以180ms的时长过渡出现。用上这个技巧以后就不需要使用js了。具体效果如下：

/** css.css **/

.child {

width: 28%;

min-height: 200px;

border-radius: 20px;

background: white;

margin: 20px 25px;

transition: box-shadow 180ms;

cursor: pointer;

}

.child:hover {

box-shadow: 4px 4px 10px #dddddd;

}

1 2	/ index.html / <div class="child"></div>

可以感觉到它的浮现效果不会那么突兀了。接下来就是怎么让鼠标移动到什么时变成一个“手”的样子，因为用的不是<a>标签，普通的<div>并不会有这个效果。后来查到了一个有趣的操作：

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

只要把鼠标停留在上面的代码上就可以获取相对应的鼠标样式。

还有个问题，有些块的介绍内容比较长，有些比较短，如何让他们能自适应，而不会出现下面类似黑色已经填充满，而红色还留有一堆白的情况呢？

我尝试直接在浏览器的检查元素里修改，我用很暴力的方式把height的所有提示的属性都尝试了一下，有一个可以适应的情况就是height: max-content;。解决了这个问题以后又有新的问题，就是上下两个块之间会留有很多的空白：

事实上去年我写支付宝的小程序的时候就注意到了这个问题，不过那时候有很多的困难险阻，这种小问题自然我们都是用别的物理方案解决。现在我们尝试用js解决一下这个问题。

我观察了另一个网页的解决方案，当我在控制台里调小了浏览器宽度时，它的内容能够很好的自适应。这都归功于他使用了position:absolute和left、top的搭配。说白了无非就是一个位置的问题，如果能精准的控制一个块的位置，那么这个问题就解决了。

我利用vue的渲染来生成这些方块，只要写一个回调函数，在渲染完这些方块以后就对每个方块的位置进行控制或许就可以了。

在vue实例的生命周期函数mounted里注册一个监听事件，用于监听当前list是否已经被赋值，如果请求到了数据，list就会被赋值，之后启动回调函数开始排序每个方块的位置。代码如下：

var app1 = new Vue({

el: ".result-container",

data: {

list: []

methods: {

click(e) {

window.open(e, '_blank')

printDiv() {

if (!this.list.length)

return;

let len = this.list.length;

let width = $('.query').width() - 40; // 左右留白20px

let height = $('.query').height(); // 搜索框所在元素的高度

let divwidth = $('.child').width(); // 每个块的宽度

let rowcnt = Math.floor(width / divwidth); // 一行可以放几个块

let colhei = Array(rowcnt);

let colwid = Array(rowcnt + 1);

colwid[rowcnt] = Math.floor(width) + 20;

for (let i = 0; i < rowcnt; i++) {

colwid[i] = Math.floor(width * i / rowcnt + 20);

colhei[i] = Math.floor(height);

}

// 计算横向位置点

for (let i = 0; i < rowcnt; i++) {

colwid[i] = Math.floor((colwid[i] + colwid[i + 1]) / 2 - divwidth / 2);

}

// 计算纵向位置点

for (let i = 0; i < len; i++) {

let id = '#div' + i;

$(id).css('left', colwid[i % rowcnt] + 'px');

$(id).css('top', colhei[i % rowcnt] + 20 + 'px');

colhei[i % rowcnt] += 20 + $(id).outerHeight();

}

getData() {

axios.get('random.php').then(res => {

this.list = res.data;

})

}

mounted: function() {

this.$watch('list', this.printDiv, { deep: true });

this.getData();

}

})

监听和渲染用的是Vue，请求获取数据用的是axios，给每个方块寻找位置用的是Jquery。事实证明效果很好，现在的方块看起来就舒服多了。搜索框正常就好，很普通，不打算做美化了。

-- 热度:140 ℃
-- 于 2020年02月23日，共写了2801个字；
-- 文内使用到的标签：

发表评论 取消回复

发表评论取消回复