wuweisen

wuweisen 查看完整档案

深圳编辑惠州学院  |  计算机科学与技术 编辑丰e足食  |  前端工程师 编辑 www.wws168.com/ 编辑
编辑

前端

个人动态

wuweisen 关注了用户 · 2020-01-13

wangshijun @wangshijun2010

资深前端工程师、架构师、布道师、麦子学院金牌讲师、前端周刊编辑

关注 216

wuweisen 关注了标签 · 2019-11-05

区块链

区块链(英语:Blockchain 或 Block chain)是一种分布式数据库,起源自比特币。区块链是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一次比特币网络交易的信息,用于验证其信息的有效性(防伪)和生成下一个区块。该概念在中本聪的白皮书中提出,中本聪创造第一个区块,即“创世区块”。

区块链在网络上是公开的,可以在每一个离线比特币钱包数据中查询。比特币钱包的功能依赖于与区块链的确认,一次有效检验称为一次确认。通常一次交易要获得数个确认才能进行。轻量级比特币钱包使用在线确认,即不会下载区块链数据到设备存储中。

比特币的众多竞争币也使用同样的设计,只是在工作量证明上和算法上略有不同。如,采用权益证明和 SCrypt 算法等等。

关注 51190

wuweisen 关注了专栏 · 2019-07-23

全栈修炼

分享 大前端开发 相关知识,全栈程序员的成长之路,公众号【全栈修炼】。

关注 5199

wuweisen 关注了用户 · 2019-07-10

小小心 @chenhengjian

关注 40

wuweisen 收藏了文章 · 2019-07-10

移动端弹性滑动以及vue记录滑动位置

-webkit-overflow-scrolling介绍

-webkit-overflow-scrolling: auto  |  touch;

auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止
touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

over-flow: auto;     /* winphone8和android4+ */
-webkit-overflow-scrolling: touch;    /* ios5+ */

如何使用

上代码:

<div class="scrollContainer">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>
.scrollContainer{
    width: 100px;
    height: 50px;   
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;       
    overflow-x: hidden;    
}
.scrollContainer>ul>li{
    height: 20px;
    width: 100%;
}

可能会出现的bug

  1. 父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动
  2. 快速滑动页面会出现空白,滑动停止后内容才显示

此时,你应该给父级元素scrollContainer加上如下代码:

//解决第一个bug
z-index:1;    

//解决第二个bug
-webkit-backface-visibility: hidden;    
-webkit-transform: translate3d(0,0,0);

需求

在vue项目中,我们可能会遇到这样的需求,例如:

商品列表页中,点击某一商品,进入到详情页。

从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。

也就是说,滚动条的位置应该缓存下来;

思路

  1. 商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
  2. 在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
  3. 在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
  4. 从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
  5. Ok,思路就是这样子,大功告成。

vue中具体实现

我是用的vuex进行管理的滚动条位置,实现代码如下:

<div class="scrollContainer" ref="scroll">    //加了一个ref,用于获取当前dom 
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>
computed:{
    ...mapGetters([
          "home_list_top"    //vuex中的存放的滚动条的位置
    ])
}
...
methods:{
    recordScrollPosition(e) {
      this.$store.dispatch("setHomeListTop",e.target.scrollTop);    //实时存入到vuex中
    }
}
...
activated(){  //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了
    this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值
    this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition);    //添加绑定事件
},
deactivated(){  //keep-alive 的页面跳转时,移除scroll事件
    this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);  //清除绑定的scroll事件
}

后话

如果有更好的办法,互相交流。
查看原文

wuweisen 关注了专栏 · 2019-07-08

Fundebug

Fundebug是专业的应用BUG监控平台

关注 313

wuweisen 回答了问题 · 2018-11-01

解决if判断哪种写法更优?

做成配置的,后面好扩展

width = {
    hide: 0,
    show: 100%
}
opacity = {
    show: 1,
    hide: 0
}
height = {
    hide: 0,
    show: 100%
}
const drawercStyle = {
    width: width['show']
}
const maskStyle = {
    width: width['show']
    opacity: opacity['show']
}

关注 8 回答 8

wuweisen 回答了问题 · 2017-11-20

解决气泡图设计-位置分布问题。

建议去找个插件,例如echarts

http://echarts.baidu.com/exam...

关注 3 回答 2

wuweisen 回答了问题 · 2017-11-20

解决angular4中对ie9和ie10的兼容性问题

Run npm install --save intl.
Run npm install --save classlist.js.
然后找到src里面的polyfills.ts文件,将注释打开

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
import 'intl/locale-data/jsonp/en';

PS:在IE9中,日期管道显示有问题(yyyy-mm-dd HH:mm:ss这种格式),需要自己写一个日期的管道

关注 8 回答 5

wuweisen 关注了标签 · 2017-11-04

angular4

Angular 4.0 版本

关注 231

认证与成就

  • 获得 87 次点赞
  • 获得 15 枚徽章 获得 1 枚金徽章, 获得 3 枚银徽章, 获得 11 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • 微信小程序-骰子游戏

    基于微信小程序所做的骰子游戏

  • angular1.X-oclazyLoad-gulp

    开发一个脚手架 angular1.X + oclazyLoad + gulp。 项目按模块开发,利用oclazyLoad按需加载每个模块的控制器,样式等。 利用gulp 将公用的js,css打成一个或多个app.js跟app.css。 一些资源直接用cdn链接,减少服务器压力(哪些采用cdn需要自行判断)。 js与css都用gulp md5化文件名,解决缓存

  • angular-mockjs

    angular结合mockjs,可以用来开发小规模应用

  • angular-webpack-oclazyload

    结合angular-webpack-oclazyload-ui-route的demo

  • dva-ant-design-mobile

    dva 是一个基于 react 和 redux 的轻量应用框架,概念来自 elm,支持 side effects、热替换、动态加载、react-native、SSR 等 该项目使用 dva 和 ant-design-mobile 创建一个简单应用。

注册于 2016-04-08
个人主页被 1.7k 人浏览