Summary of knowledge points about data rendering
Template string
Using a template engine can help us render pages more quickly, we need to introduce third-party js files to use, it is very convenient to get used to the syntax.
- Common template engine?
=> art-template, both front and back ends can be used
=> underscroll, back-end JS cannot be used
=> e.js, back-end JS cannot be used
=> template, back-end JS cannot be used - Use steps
① Import the third-party JS file first
<script src="./lib/template-web.js"></script>
②Create a script tag with type text/html, and set an id to facilitate calling.
<script type="text/html" id="tmp">
{
{
each list}}
<div class="xiaoji">
￥{
{
$value.goods_price * $value.cart_number }}
</div>
</li>
{
{
/each }}
</script>
③Call with template method
var str = template('tmp', {
list: cart,
total: total,
totalPrice: totalPrice.toFixed(2)
})
box.innerHTML = str
Capture data
var listbox = document.querySelector('.listbox')
var viewPortHeight = document.documentElement.clientHeight
var uloffsetTop = listbox.offsetTop
var totalPage = Math.ceil(data.length / 20)
var currentPage = 1
var flag = true
var loading = document.querySelector('.loading')
Render data->bindHTML()
function bindHTML() {
var bindList = data.slice((currentPage - 1) * 20, currentPage * 20)
var frg = document.createDocumentFragment()
bindList.forEach(element => {
var li = document.createElement('li')
li.innerHTML = `
<div class="img">
<img src="${
element.goods_big_logo}" alt="">
</div>
<p>${
element.goods_name}</p>
<span>￥${
element.goods_price.toFixed(2).big().fontcolor('red')}</span>
`
var btn = document.createElement('button')
btn.innerHTML = '添加到购物车'
btn.setAttribute('goodsid', element.goods_id)
btn.onclick = addCart
li.appendChild(btn)
frg.appendChild(li)
});
listbox.appendChild(frg)
flag = true
loading.classList.remove('active')
}
bindHTML()
Pull down to refresh ->window.oncroll = function(){}
window.onscroll = function () {
var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + viewPortHeight
var ulHeight = uloffsetTop + listbox.offsetHeight
// console.log('scrollTop'+ scrollTop)
// console.log("ulHeight" + ulHeight)
if (scrollTop < ulHeight) return
if (currentPage === totalPage) return
if (!flag) return //开关为开 就跳过去继续执行
flag = false //为了保证只执行一次 接着关掉开关
loading.classList.add('active')
setTimeout(function () {
currentPage++
bindHTML()
}, 1000)
}
Add product to cart->addCart()
function addCart(){
var goodsid = this.getAttribute('goodsid')-0
var goods = data.find(function(item){
return item.goods_id === goodsid})
var list = JSON.parse(window.localStorage.getItem('cart')) || []
if(!list.length){
//if list is empty ,
goods.cart_number = 1
list.push(goods)
}else{
var res = list.some(function(item){
return item.goods_id === goodsid})
if(res){
var index = list.findIndex(function (item) {
return item.goods_id === goodsid })
list[index].cart_number++
// goods.cart_number++
// console.log(list[index].cart_number)
// console.log(goods.cart_number)
}else{
goods.cart_number = 1
list.push(goods)
}
}
window.localStorage.setItem('cart',JSON.stringify(list))
}