[SPA Tutorial : Vue.js] Part3 : Control News data - More button
Step 1: News - More
Tiếp nối nội dung đã được xây dựng ở Part2, lần này chúng ta sẽ thêm tính năng xử lý với button Xem thêm (More).Cú pháp chính Cryptocurrency.vue
// HTML template syntax
<article>
<div class="h_area">
<h2>Recent News</h2>
</div>
<ul>
<li v-for="item in news" :key="item.id">
<a :href="item.url">
<div class="bx_thumb">
<img :src="item.imageurl" width="60" height="60" :alt="item.body">
</div>
<dl>
<dt>[{{item.published_on | moment}}] {{item.title}} </dt>
<dd>
<p>{{item.body}}</p>
</dd>
</dl>
</a>
</li>
</ul>
<button
type="button"
v-on:click="appendNews()"
:disabled="this.dataFull === true"
:class="{disabled : dataFull}"
>
More ({{cntNews}}/{{totNews}})
</button>
</article>
// Data object
data() {
return {
newsAll: {}, // Full news data
news: {}, // News data exposed on screen
totNews: 0, // Total news data
cntNews: 5, // Number of news data to display on screen (initial setting = 5)
dataFull: false, // Whether to call more data than the entire data
}
},
// Method to add to the Vue instanc
methods: {
// Cryptocurrency news information processing
bindNews() {
axios.
get('https://min-api.cryptocompare.com/data/v2/news/?lang=EN')
.then(res => {
let data = []
for(var i=0;i<this.cntNews;i++) {
data.push(res.data.Data[i])
}
this.newsAll = res.data.Data
this.news = data
this.totNews = this.newsAll.length
})
.catch(e => {
console.log(e);
})
},
appendNews() {
// If the number of news that is exposed is less than the total number of news
if(this.cntNews < this.totNews) {
this.cntNews += 5 // 5 impression news increase
let data = []
for(var i=0;i<this.cntNews;i++) {
data.push(this.newsAll[i]) // Extract data from the total news to the number of impressions and add it to the data array
}
this.news = data // Update data array to news object
// If the total number of news is equal to the number of news impressions
} else {
this.dataFull = true // change dataFull object to true
alert('List items are fully loaded!') // All data output notification
}
},
// Access to components, templates, and rendered domes (in the instance lifecycle).
mounted() {
this.bindNews()
},
<style lang="scss">
button {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 20px 0 19px;
border: 0;
border-top: 2px solid #1b212f;
background: #1d2943;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.disabled {
border-top: 2px solid #e1e1e1;
background:#e9e9e9;
color:#777;
}
</style>
[Dòng chảy data]
- bindNews() – Tiến hành trong rendering ban đầu
- Yêu cầu API data
- Hiện danh sách 5 bài viết
- Update số lượng data bài viết (Đang hiện/Toàn bộ) trên button - appendNews() – Tiến hành khi click vào More button
- Hiện danh sách bài viết +5 ea
- Update số lượng data bài viết đang hiện trên button +5
- Trường hợp ấn button thêm lần nữa khi đã hiện toàn bộ data (50/50)
1) Update bằng dataFull = true
- Thay đổi button sang trạng thái disabled theo v-bind directive của button
- Thêm class .disabled CSS vào button (Áp dụng design disabled)
2) Hiện alert ‘List items are fully loaded!’ do không có data nào hiện thêm
- Nếu như trong trường hợp có data được gọi thêm trên API, sau khi yêu cầu data thêm bằng Axios thì sẽ thêm code để có thể update đối tượng newsAll.
Ngoài ra sẽ có một số tính năng như sau mà chúng ta có thể thử xây dựng thêm.
0. Chung
- Áp dụng data loading overlay (spinner)
- Áp dụng message toast popup người dùng
1. LIVE PRICES
- Áp dụng update giá tiền ảo mỗi phút
- Hiện thời gian update (Title phía bên phải)
- Hiện timer 60 giây (bên trái phía trên màn hình)
- Áp dụng màu background đặc thù tại cell giá được update (fadeIn/fadeOut)
- Nếu ấn vào cell tiền ảo nhất định thì sẽ di chuyển tới chart
(ex: https://cryptowat.ch/markets/bithumb/btc/krw)
2. RECENT NEWS
- Áp dụng update bài viết news mỗi 10 phút
- Hiện thời gian update (Title phía bên phải)
- Áp dụng dịch Anh/Hàn <> Hàn/Anh
Sản phẩm đã hoàn thiện các bạn có thể check tại trang http://fe.hivelab.co.kr/spa.
[Vue.js] SPA Tutorial - Part1
Project setting, gọi data API sử dụng Axios - Price
[Vue.js] SPA Tutorial - Part2
Gọi data API sử dụng Axios - Ratio, News
[▣] [Vue.js] SPA Tutorial - Part3
Control News data — More button
Comments
Post a Comment