yokodak

yokodak 查看完整档案

成都编辑四川大学  |  物联网工程 编辑  |  填写所在公司/组织填写个人主网站
编辑

前端学习ing~~

个人动态

yokodak 发布了文章 · 10月26日

better-scroll的纵向滚动和横向滚动:

better-scroll的纵向滚动和横向滚动:

前言:

最近学习了vue,在自己做一个小项目练习,期间要使用到better-scroll来实现流畅的滚动效果,一开始只知道它能实现纵向滚动(是我孤陋寡闻了/(ㄒoㄒ)/~~),后来还要实现横向滚动的功能,搜索了一下,发现横向滚动和纵向滚动还是有点区别的,所以在这里归纳总结一下,希望能帮到有这个需求的人噜。

(无图警告: 因为还没搞懂怎么添加图片这篇文章没有演示图)

1.安装better-scrollb

我是使用npm安装的:

 npm install better-scroll --save

也可以用其他安装方法,这里就不说了。

2.将滚动功能抽取为一个组件:

实现滚动这个功能肯定很多组件都会用到,既然如此我们就其专门封装为一个组件,我这里称滚动组件为 scroll,在要实现滚动的组件内套用该组件即可。

而且这样只有这两个组件对better-scroll有依赖,其他要实现滚动的组件没有,方便后期对项目进行维护。

以下所有组件在和 app.vue 在同一目录下

scroll滚动组件封装:

纵向滚动:

只有content(滚动区域)的高度大于包裹它的wrapper的高度时,才会滚动,具体原理可以查看:https://zhuanlan.zhihu.com/p/...

只要给wrapper一个高度,当滚动内容的高度大于wrapper高度时就会发生滚动。

横向滚动:

但是在横向滚动时,html中块级元素的宽度度默认是其父元素的100%,所以content的默认宽度就是wrapper的宽度,滚动区域宽度等于包裹体的宽度,就不会发生横向滚动了,解决方案是将content的宽度设为其子元素的宽度。

将块级元素的宽度设置为其子元素宽度的方法有几种,可以参考:https://www.jianshu.com/p/f31...

这里我是使用的将display设置为inline-flex:

 .content{
    display: inline-flex;
    overflow: hidden;
  }

设置后该元素内的子元素都会横向排列,根据自己的需求,在使用scroll组件的模板内决定是否要添加该类,纵向滚动不需要为div设置该类

下面是该组件的具体代码,关键的参数就是把scrollX设置为true, 让X轴滚动启用,更多参数可以查看官方文档或者搜索一下。用到的参数作用见代码注释

scroll.vue

<template>
 <div class="wrapper" ref="wrapper">
     <!-- 默认插槽,使用该组件时用要滚动内容替换 -->
     <slot></slot>
 </div>
 
</template>

<script>
 //导入BScroll
 import BScroll from "better-scroll"
export default {
 name:"scroll",
 data() {
   return {
     scroll:null
   }
 },
 mounted() {
   //创建BScroll对象并设置参数
   this.scroll = new BScroll(this.$refs.wrapper,{
     mouseWheel: true,//开启鼠标滚轮
     disableMouse: false,//启用鼠标拖动
     disableTouch: false,//启用手指触摸
     scrollX: true,  //X轴滚动启用  
     // eventPassthrough: 'vertical',设置该属性为vertical 则只会滚动设置为true的轴
   })
 },
}
</script>

<style scoped>

</style>

3.纵向及横向滚动实现:

使用scroll组件实现纵向和横向滚动:

scrollTest组件中要求实现滚动功能:

只用在需要要滚动的区域外,套上刚才封装的组件scroll即可。

这里为了测试我直接给定了wrapper的高度300px,宽度300px,实际使用时你可以通过计算来决定或者自己指定一个高度。

注意设置wrapper的 overflow: hidden;,不设置也不影响纵向滚动,但是会让横向滚动出现原生滚动条,而使整个页面滚动(当滚动区宽度太大时)

scrollTest.vue代码如下:

<template>
  <div class="Test">
    <!-- 使用滚动组件 -->
     <scroll class="wrapper">
       <!-- 下面的内容替换了默认插槽 -->
       <div class="content">
          <div class="scrollTest">我是要纵向和横向都滚动的内容</div>
          <div class="scrollTest scrollTest2">我也是要纵向和横向都滚动的内容</div>
       </div>
       
     </scroll>
  </div>
</template>

<script>
  //导入刚才封装的滚动组件
  import scroll from './scroll'
export default {
  name:"scrollTest",
  components:{
    scroll        //注册组件
  }
}
</script>

<style scoped >
  .wrapper{
    background-color: green;
    height: 300px;
    width:300px;
    overflow: hidden;
  }
  /* 设置后该元素内的子元素都会横向排列,根据自己的需求来决定是否要设置
  *  纵向滚动不需要设置该类。
  */
  .content{
    display: inline-flex;
    overflow: hidden;
    }
  /* 设置滚动内容的宽和高都大于wrapper */
  .scrollTest,.scrollTest2{
     background-color:red;
     width: 900px;
     height: 600px;
     font-size: 30px;
     font-weight: bold;
  }
  .scrollTest2{
     background-color:yellowgreen;
  }

</style>

可以在app.vue里使用 scrollTest 组件测试效果

app.vue:

<template>
  <div id="app">
    <scrollTest></scrollTest>
  </div>
</template>

<script> 
  import scrollTest from './scrollTest'
export default {
  name:'app',
  components:{  
    scrollTest
  }
}
</script>
<style lang="less">
  // @import "assets/css/base.css";
</style>

结束,如果有错的地方欢迎指正~~

查看原文

赞 1 收藏 1 评论 0

yokodak 赞了文章 · 10月12日

javascript生成二叉树,前中后序遍历

**二叉树是一种数据结构。其特点是:

1.由一系列节点组成,具有层级结构。每个节点的特性包含有节点值、关系指针。节点之间存在对应关系。

2.树中存在一个没有父节点的节点,叫做根节点。树的末尾存在一系列没有子节点的节点,称为叶子节点。其他可以叫做中间节点。

3.树的根节点位于第一层,层级数越大,节点位置越深,层级数也叫做树高。

**排序二叉树为二叉树的一种类型,其特点是:

1.节点分为左右子树。

2.在不为空的情况下,左子树子节点的值都小于父节点的值。

3.在不为空的情况下,右子树子节点的值都大于父节点的值。

4.每个节点的左右子树都按照上述规则排序。
image.png

(一)生成二叉树

// 将值生成节点,节点包括:节点值、左指针、右指针
class Node {
  constructor(key) {
    this.key = key;
    this.left = null;
    this.right = null;
  }
}
// 二叉树
class BinaryTree {
  constructor() {
    this.root = null; // 根节点
  }
  // 插入,插入的是一个节点,所以应该先把值生成节点(包括节点值,左指针,右指针)
  insert(key) {
    const newNode = new Node(key);
    // 如果根节点为空,则新节点作为根节点,否则在根节点下进行插入
    if (this.root === null) {
      this.root = newNode;
    }
    this.insertNode(this.root, newNode);
  }

  // 有根节点的情况下插入值
  insertNode(root, newNode) {
    if (newNode.key < root.key) {
      // 进入左子树
      if (root.left === null) {
        // 左子树为空
        root.left = newNode;
      } else {
        // 左子树已存在
        this.insertNode(root.left, newNode);
      }
    } else if (newNode.key > root.key) {
      // 进入右子树
      if (root.right === null) {
        // 右子树为空
        root.right = newNode;
      } else {
        // 右子树已存在
        this.insertNode(root.right, newNode);
      }
    }
  }
}
const binaryTree = new BinaryTree();
var keys = [19, 8, 15, 24, 45, 12, 5];
keys.forEach((key) => binaryTree.insert(key));
console.log(binaryTree);

image.png

(二)二叉树的遍历

1. 中序遍历

(1)递归方法

// 中序遍历:递归方法
var inorderTraversal = function (root) {
  var result = [];
  pushRoot(root, result);
  return result;
};
function pushRoot(root, result) {
  if (root !== null) {
    // 左
    if (root.left !== null) {
      pushRoot(root.left, result);
    }
    // 中
    result.push(root.key);
    // 右
    if (root.right !== null) {
      pushRoot(root.right, result);
    }
  }
}

// 注意这里传入的是binaryTree.root,而不是binaryTree
inorderTraversal(binaryTree.root); // [5, 8, 12, 15, 19, 24, 45]

(2)非递归方法(栈)

var inorderTraversal = function (root) {
  let result = [];
  let stack = [];
  let node = root;
  while (node !== null || stack.length !== 0) {
    if (node !== null) {
      stack.push(node);
      node = node.left; // 遍历左,存入栈中
    } else {
      debugger;
      // node===null时说明左边没有了,那么栈顶就是最左边的(最小的)
      node = stack.pop();
      result.push(node.key);
      node = node.right; //看右边有没有
    }
  }
  console.log(result); // [5, 8, 12, 15, 19, 24, 45]

  return result;
};

inorderTraversal(binaryTree.root);

2.前序遍历

(1)递归方法

// 前序遍历 递归
var preOrderTraversal = function (root) {
  var res = [];
  preOrder(root, res);
  return res;
};
function preOrder(root, res) {
  if (root !== null) {
    // 中
    res.push(root.key);
    // 左
    preOrder(root.left, res);
    // 右
    preOrder(root.right, res);
  }
}
console.log(preOrderTraversal(binaryTree.root)); // [19, 8, 5, 15, 12, 24, 45]

(2)非递归方法(栈)

var preOrderTraversal = function (root) {
  var res = [];
  var stack = [];
  var node = root;
  while (node !== null || stack.length !== 0) {
    if (node !== null) {
      res.push(node.key);
      stack.push(node);
      node = node.left;
    } else {
      node = stack.pop();
      node = node.right;
    }
  }
  return res
};
console.log(preOrderTraversal(binaryTree.root)) // [19, 8, 5, 15, 12, 24, 45]

3.后序遍历

(1)递归方法

var afterOrderTraversal = function (root) {
  var res = [];
  afterOrder(root, res);
  return res;
};
function afterOrder(root, res) {
  if (root !== null) {
    // 左
    afterOrder(root.left, res);
    // 右
    afterOrder(root.right, res);
    // 中
    res.push(root.key);
  }
}
console.log(afterOrderTraversal(binaryTree.root)); // [5, 12, 15, 8, 45, 24, 19]

(2)非递归方法

首先要搞清楚先序、中序、后序的非递归算法共同之处:用栈来保存先前走过的路径,以便可以在访问完子树后,可以利用栈中的信息,回退到当前节点的双亲节点,进行下一步操作。

后序遍历的非递归算法是三种顺序中最复杂的,原因在于,后序遍历是先访问左、右子树,再访问根节点,而在非递归算法中,利用栈回退到时,并不知道是从左子树回退到根节点,还是从右子树回退到根节点,如果从左子树回退到根节点,此时就应该去访问右子树,而如果从右子树回退到根节点,此时就应该访问根节点。所以相比前序和后序,必须得在压栈时添加信息,以便在退栈时可以知道是从左子树返回,还是从右子树返回进而决定下一步的操作。

查看原文

赞 2 收藏 1 评论 2

yokodak 赞了问题 · 9月16日

segmentfault里面的笔记没法插入图片

要怎么做才能在笔记里插入图片啊?还是说压根不行??

关注 2 回答 2

yokodak 回答了问题 · 9月16日

segmentfault里面的笔记没法插入图片

请问楼主解决了么?我也想问
image-20200904154044348
我这图片是直接从markdown里粘贴过来的怎么也不行呀image
image
只能上传图片,在写思否笔记的时候也不能添加图片,只能在写文章里才能上传图片。
小小白一个,刚来不太懂,想把以前写的本地学习笔记搬运到思否/(ㄒoㄒ)/~~

关注 2 回答 2

yokodak 关注了标签 · 9月16日

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 134833

yokodak 关注了标签 · 9月16日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 152749

yokodak 关注了标签 · 9月16日

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 97050

yokodak 关注了标签 · 9月16日

程序员

一种近几十年来出现的新物种,是工业革命的产物。英文(Programmer Monkey)是一种非常特殊的、可以从事程序开发、维护的动物。一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发、维护工作,特别是在中国,而且最重要的一点,二者都是一种非常悲剧的存在。

国外的程序员节

国外的程序员节,(英语:Programmer Day,俄语:День программи́ста)是一个俄罗斯官方节日,日期是每年的第 256(0x100) 天,也就是平年的 9 月 13 日和闰年的 9 月 12 日,选择 256 是因为它是 2 的 8 次方,比 365 少的 2 的最大幂。

1024程序员节,中国程序员节

1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事程序开发、维护的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1GB=1024M,而1GB与1级谐音,也有一级棒的意思。

从2012年,SegmentFault 创办开始我们就从网络上引导社区的开发者,发展成中国程序员的节日 :) 计划以后每年10月24日定义为程序员节。以一个节日的形式,向通过Coding 改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。并于之后的最为临近的周末为程序员们举行了一个盛大的狂欢派对。

2015的10月24日,我们SegmentFault 也在5个城市同时举办黑客马拉松这个特殊的形式,聚集开发者开一个编程大爬梯。

特别推荐:

【SF 黑客马拉松】:http://segmentfault.com/hacka...
【1024程序员闯关秀】小游戏,欢迎来挑战 http://segmentfault.com/game/

  • SF 开发者交流群:206236214
  • 黑客马拉松交流群:280915731
  • 开源硬件交流群:372308136
  • Android 开发者交流群:207895295
  • iOS 开发者交流群:372279630
  • 前端开发者群:174851511

欢迎开发者加入~

交流群信息


程序员相关问题集锦:

  1. 《程序员如何选择自己的第二语言》
  2. 《如何成为一名专业的程序员?》
  3. 《如何用各种编程语言书写hello world》
  4. 《程序员们最常说的谎话是什么?》
  5. 《怎么加入一个开源项目?》
  6. 《是要精于单挑,还是要善于合作?》
  7. 《来秀一下你屎一般的代码...》
  8. 《如何区分 IT 青年的“普通/文艺/二逼”属性?》
  9. 程序员必读书籍有哪些?
  10. 你经常访问的技术社区或者技术博客(IT类)有哪些?
  11. 如何一行代码弄崩你的程序?我先来一发
  12. 编程基础指的是什么?
  13. 后端零起步:学哪一种比较好?
  14. 大家都用什么键盘写代码的?

爱因斯坦

程序猿崛起

关注 110726

yokodak 关注了标签 · 9月16日

html

超文本标记语言(英文:HyperText Markup Language,HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

关注 62357

认证与成就

  • 获得 1 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 9月16日
个人主页被 72 人浏览