项目介绍

• 主要页面
  1、首页home.vue分类展示书籍，幻灯片展示热门推荐
  2、搜索search.vue，上拉加载更多
  3、书籍详情book.vue加入书架、立即阅读，展示评论，同类书籍推荐
  4、书籍内容read.vue，获取目录，存储翻阅的章节位置，
  5、书架bookrack.vue，获取加入书架的书单
• 技术栈
  vue、vue-cli、axios、vue-router、vuex、localStorege

app.vue入口页面

• 分成底部导航 跟 主视图容器 router-view

tabbar/Home为首页

• 包含： components/sub/item 和 components/sub/search 、components/sub/header

• 结构： banner切换 与 搜索 和 小说分类楼层

  小说楼层单独定义了组件 components/sub/item , home循环楼层分类名称，并将楼层分类id传给item组件 :booklistId='{id:item._id}' , item组件用props: ["booklistId"] 接收分类id, 并根据分类id获取对应的数据

  item.vue

  1 2 3 4 5 6 7 8 9 10 11 12 13

  mouted: this.getlist(this.booklistId.id); methods: getlist(id) { //每个分类id下对应的数据 子组件接收父组件传过来的id 获取对应的数据 bootd(id).then(res => { var arrdata = res.data.data; arrdata.map(item => { this.booklist.push(item.book); }); }); }

demo演示：http://msisliao.github.io/demo/dist/index.html#/

• 安装vue-cli
• 安装elementUI npm i element-ui -S
• 在main.js 引入elementUI

1
2
3

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

demo功能概览

• 默认没有全选，搜索时支持全选与取消全选，
• 将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态
• 全选时全部追加到已选，取消全选时从已选中删除当前搜索的列表

功能列表

1、搜索时展示相应的数据列表，支持全选与取消全选，（默认展示所有数据时不支持全选）

1
2
3
4
5
6
7
8
9
10

datas() {
  // 每次搜索的数据 根据下拉菜单的值的变化
  if (this.value !== "") {
    return this.listItem.list.filter(item => {
      return item.BrandNames.includes(this.value);
    });
  } else {
    return this.listItem.list; // 没有搜索的关键词时展示全部数据
  }
},

有人会问：既然要取消选中为什么不用checkbox呢？
举个栗子，比如选中性别时，用户可以选男或者女(二选一)，然后也可以取消选中(二者都不选)
这时这个demo就派上用场了

1
2
3
4
5
6
7
8
9

/* 如果直接@click会触发两次 默认有change事件 */
/* @click.native.prevent 加上这个阻止默认事件 */

  <el-radio-group v-model="area">                    
     <el-radio @click.native.prevent="clickitem(item.AreaName)"
       :label="item.AreaName"  v-for="(item,index) in areaItem"
        :key="index">{{item.AreaName}}</el-radio>
  </el-radio-group>

最近…闲了半个多月，每天都不知道该干嘛🤧，无聊至极无聊透顶，看文档吧看着看着又打瞌睡，仿项目写写代码吧，又懒，没有之前勤快了，至少之前闲暇时会动手，现在….整天发呆中!!!!
呃呃~~ ，那就整理下之前的笔记吧，好久没写博客，似乎都已经忘了自己有博客。

今天主角是scroll事件和移动端的touch事件，没有什么干货，就是单纯的想让博客活跃下

页面拉到底时自动加载更多

1
2
3
4
5
6
7
8

$(window).scroll(function(event){
  var wScrollY = window.scrollY;   // 当前滚动条位置 
  var wInnerH = window.innerHeight; // 设备窗口的高度（不会变） 
  var bScrollH = document.body.scrollHeight; // 滚动条总高度 
  if (wScrollY + wInnerH >= bScrollH) { 
    showMore();
  } 
});

vue

基于vue-cli构建的简易demo（vue2.0、vue-router、vue-resource）

整个项目(demo)，比较简单，只包含了三个页面,

前几天@歪闹说想换个类似 http://www.dengzhr.com 这个风格的博客，然后进去瞄了几眼看到一篇关于数字线性变化的动画文章，美女是用js写的自己封装的插件(羡慕js棒棒的美女),然后感觉css也可以写，不过没有她的那么方便吧

来看效果，当然还是少不了几行js

我们来看看具体的实现方式吧

Array.of()

1
2
3

//将一组数值转换为数组

   console.log(Array.of(1,3,4,'a')) //[1, 3, 4, "a"]

来看看es6对数值做了哪些扩展

1
2
3
4

/*-----在ES6的标准中,数值属性都移植到了Number下 使用时Number.isNan Number.parseFloat...*/
console.log(isNaN('abc')) //true  'abc'无法转为一个数值，返回true
console.log(Number.isNaN(1.1)) //flase 因为2.5是一个数值
console.log(Number.isNaN('abc')) //false  'abc'是字符串，Number.isNaN不做类型转换，直接返回false

新增Number.isInteger函数

1
2
3
4
5

//用来判断是否是整数。

console.log(Number.isInteger(41.1)) //false
console.log(Number.isInteger(3)) //true
console.log(Number.isInteger(3.01)) //false