Vue

vue 左右滑动

直接上代码，nice
结构

<ul class="area-nav" ref="citynav">
     <li class="active">贵阳市</li>
     <li>遵义市</li>
     <li>六盘水市</li>
     <li>安顺市</li>
     <li>毕节市</li>
     <li>铜仁市</li>
     <li>黔东南市</li>
     <li>黔南市</li>
     <li>黔西南市</li>
</ul>

样式

  .area-nav{
    height: 53px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* flex-wrap: nowrap; */
    /* justify-content: space-between; */
    border-bottom: 1px solid #E9D9D6;;
    margin-bottom: 21px;
    overflow-x: auto;
    overflow-y: hidden;
    
    transition: margin-left 2s;
    -webkit-transition: margin-left 2s; /* Safari */
    
  }
  .area-nav::-webkit-scrollbar{
        height: 5px;
  }
  .area-nav li{
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 50px;
    color: #333333;
    position: relative;
    display: inline-table;
    padding: 0 20px;
    flex-shrink: 0;
  }
  .area-nav li.active,.area-nav li:hover{
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FA3230;
  }
  .area-nav li.active:after,.area-nav li:hover:after{
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40%;
    height: 6px;
    background: #FF5B36;
    border-radius: 3px;
  }

脚本

cityBanner:function(){
    let speed = 0;
    let pl = 0;//判断上一次值和本次值是否一样调换方向
    window.setInterval(function(){
        //这里scrollWidth 不是scrollLeft值
        if(speed == 2 && pl == thisApp.$refs.citynav.scrollLeft){
            speed = -1;
        }else if(thisApp.$refs.citynav.scrollLeft == 0){
            speed = 2;
        }
        pl = thisApp.$refs.citynav.scrollLeft;
        thisApp.$refs.citynav.scrollLeft += speed;        
    },50);
}
阅读全文
2022-02-22 0 条评论
javascript语言Vue

js、vue在数组中找某类值 并删除

我相信，好多查这个问题的人都知道怎样删除数组数据。但在查找情况下，及查到一个值删除一个值，就不会了
vue删除值通常有3种
arr.aplice(索引值,删除长度);
delete arr[索引值];
this.$delete(arr,索引值);

那问题来了，查找呢？
开始我是这样写的，哈哈，发现有问题，删除某一项数据后，数组大小会变，按索引值不对后面就不对了

for(let s in data){
   if(data[s] == search){
        data.splice(s,1);
   }
}

这个问题纠结我了好久，突然想到，把数组倒过来查并删除数据项，就不会出现这样的情况了，突然想通过了，有点好气的感觉，原来，就这么简单。哈哈，你是不是也有这样的感觉？

for(let s=data.length-1;s>=0;s++){
   if(data[s] == search){
        data.splice(s,1);
   }
}
阅读全文
2021-11-26 1 条评论
闲言碎语

局域网访问某路由器下面的服务器

在配置虚拟服务器前，先要配置要独立IP

配置独立IP会出现 DHCP（动态主机配置协议）失效问题，而且，使用疑难问题修复，可能导致网站不能访问，但如果刚好想设置只开通外网访问功能，就可以这样了。如果想上网，局域服务器 配置DNS与主机地址相同（但期间设置过DMZ，如果还是不可以，试一下DMZ）

我这里是关闭防火墙生效的，没有尝试打开防火墙的情况

阅读全文
2021-11-20 0 条评论
lumenphp语言laravel

API下载 组装的 word 文档

Word文档生成有很多种方式，图简单，其实可以就按html排版，一键导出
网页直接导出，记得加上导出word约束的头($fileName,导出的文件名)

header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=$fileName");

这种导出呢，样式和原生网页是有点问题，但注意单位和尺寸，就没有多大问题了，具体的要自己尝试

但现在的开发，基本上都是前后端分离，API方式调用，那怎么实现呢？

同样是调用地址就OK了吗？
不是的，直接调用网页的地址，发现没有反应，第一反应是不是API头部约束了什么，导致了不能直接下载原格式的word文档

琢磨了好久，没有成功，我换了一种思路，先把word文档保存起来，返回文档下载路径给API
期间我请求了一下API，居然可以正常返回了，但只是html代码，情况是我在准备保存word文档到本地的时候，去掉了头部约束，是header的影响

那能正常返回就好办了，两种方式
第一种，就是直接保存为word文档下载。
第二种，正常返回后，转为word文档保存。
第一种没有什么可谈的，容易理解也好办
第二种以Axios为例

function apiRequestDownload(url, filename, type, formData, config = {}) {
    return new Promise((resolve, reject) => {
        Axios({ url, responseType: "blob", method: type, data: formData,config })
            .then(result => {
                let fileURL = window.URL.createObjectURL(
                    new Blob([result.data], { type: '' })
                );
                let fileLink = document.createElement("a");

                fileLink.href = fileURL;
                fileLink.setAttribute("download", filename);
                document.body.appendChild(fileLink);

                fileLink.click();
                resolve(result);
            })
            .catch(err => {
                reject(err);
            });
    });
}
阅读全文
2021-07-17 1 条评论