前言:基于vue2.0,vux-UI组件库搭建的网易新闻首页,实现移动端新闻首页一些基本的样式及功能,滑动,切换,轮播图,跑马灯,下拉刷新及上拉加载等。
数据有vue插件 vue-jsonp 动态请求拉取

关键词vue vux-UI vue-jsonp vue-scroller vue-cli配置


在vue-cli基础上安装vux及相应配置

官方提供了快捷模板,很遗憾安装快捷模板依赖安装没能成功,只好手动安装了,文档里有些配置说的含糊其辞,踩了很多坑

1
vue init airyland/vux2 projectPath

再说vue-cli打包配置问题

1
sry,no time to write

引入相关组件及插件

1
2
3
4
5
6
7
8
9
10
11
12
import {  ViewBox,
XHeader,
Tabbar,
TabbarItem ,
Tab,
TabItem,
Scroller as Scroll,
Swiper,
Marquee,
MarqueeItem,
Panel
} from 'vux';

组件的属性、插槽、事件及方法

注入组件的数据需要按照其提供的数据格式进行数据改造

新闻数据接口

更改请求码刷新新闻数据,更改起止索引加载更多

1
2
3
http://3g.163.com/touch/jsonp/sy/recommend/0-9.html
miss:'00'
['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B010']

新闻数据的过滤及改造

163返回的数据不一定都符合我们的要求,有的新闻附加了广告,有的没有附带图片,改造则是剔除每条新闻不需要的属性,如热文列表只需要取一张图片、一个标题、新闻描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

created(){
this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html')
.then( data =>{
// console.log(data);

//swiper数据
this.swiperdata = data.focus.filter( item =>{
return item.addata === null&&item.picInfo[0];
} ).map( item=>{
return {
img: item.picInfo[0].url,
url: 'https://blog.liufulin.online/',
title: item.title
}
} )
//热文列表数据
this.datalist = data.list.filter( item =>{
return item.addata === null&&item.picInfo[0];
} ).map( item=>{
return {
src: item.picInfo[0].url,
fallbackSrc: 'https://blog.liufulin.online/img/avatar.jpg',
url: item.link,
title: item.title,
desc: item.digest
}
} )
//跑马灯数据
this.marqueelist = data.news.filter( item =>{
return item.addata === null;
} ).map( item =>{
return {
digest: item.digest.substr(0,document.body.clientWidth/17),
key: item.docid
}
} )
isinit = true;
// console.log(document.body.clientWidth);
} )
}

移动端样式重置及组件样式调试

1
2
3
4
<style lang="less" > //同时把样式语言设置为less

@import '~vux/src/styles/reset.less';
<style>

使用vue-scroller插件

引入vue-scroller和Toast插件并挂载到vue实例下面,在组件内通过this.$vux.toast直接调用

1
2
3
4
5
import VueScroller from 'vue-scroller'
import { Toast } from 'vux';

Vue.use(Toast);
Vue.use(VueScroller);

解决Scroller实例下拉刷新事件预先触发机制

设置状态量,在组件created完成之后改变状态量,Scroller插件实例的infinite函数通过判断状态量来决定是否执行

TODOS

样式调试: 没有解决把导航滑动组件扔在下拉插件的外面,导致导航滑动组件可以同时触发X、Y两个方向的滑动

配合vue-router实现多页面

配合vuex实现多状态管理

案例源码: 传送门
在线演示: demo