引子
不用php作后端,是因为不想在语法切换中精神分裂掉,同时也更好的复用小程序中的代码,那为什么用LeanCloud的js sdk作server呢,是因为我不会node.js
使用vue,是对它的数据双向绑定欲罢不能,移动时代浏览器兼容已不是大问题同时强烈体积轻巧的大背景下,jQuery已经完成了它的主要使命了
使用element,是因为它确实很漂亮,拿它当Bootstrap用了,当然它的替代产品iView也不错。
先上图
![首页](https://static.oschina.net/uploads/img/201703/29224152_CURi.png)
![详情页](https://static.oschina.net/uploads/img/201703/29224206_8oVg.png)
起步
用下面这种通过最简单的方式使用element,不折腾npm,webpack,vue-cli。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
先堆个轮播出来
<div id="app">
<template>
<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Click 指示器触发</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
</div>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
<script>
new Vue({
el: '#app'
})
</script>
![输入图片说明](https://static.oschina.net/uploads/img/201703/28215524_zFCi.png)
引入LeanCloud sdk
<script src="https://cdn1.lncld.net/static/js/2.1.3/av-min.js"></script>
主角登场,加载数据
<script>
var app = new Vue({
el: '#app',
data: {
courseObjects: []
},
mounted: function() {
loadBannerCourse(function (courseObjects) {
app.courseObjects = courseObjects;
});
}
});
</script>
这时轮播就显示了海报了
引入栅格布局
上面的海报是占满全屏,这不是想要的,27寸下显示会哭死,只要1200px宽度就够了。
<div id="app">
<el-row>
<el-col :span="24">
<!-- 海报 -->
<template>
<div class="block">
<el-carousel height="450px">
<el-carousel-item v-for="item in courseObjects">
<h3>![](item.cover.url)</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="4"></el-col>
<el-col :span="4"></el-col>
<el-col :span="4"></el-col>
<el-col :span="4"></el-col>
<el-col :span="4"></el-col>
<el-col :span="4"></el-col>
</el-row>
</div>
发现它对响应式支持不友好,于是深深地被打脸。可以考虑回到Bootstrap了,element就用来做纯PC后台吧。
这次,先一条道走到黑,用ele把首页的卡片布局,详情页也做做完。
用卡片实现单元格
<el-card :body-style="{ padding: '8px' }" class="card">
<a :href="'detail.html?courseId=' + item.objectId">![](item.cover.url)</a>
<div style="padding: 14px;">
<span>{{item.name}}</span>
<div class="bottom clearfix">
<time class="time">{{ item.minutes }} 分钟</time>
</div>
</div>
</el-card>
就这样全程只用html/js实现的整个数据请求与页面渲染了。
源代码就不需提供下载了,直接访问这个demo的地址,http://video.it577.net/,Ctrl + U就全都有啦。
网友评论