html怎么做商品列表，纯js实现商品列表功能商品列表
功能需求：根据数据创建商品列表
来看⼀下效果：
html结构：模拟商品数据，根据数据实例化Main对象。
goodsList
import Main from './js/Main.js';
var arr=[
{img:"img01.webp",title:"不知⽕丑柑丑橘5⽄装",desc:"第⼆件9.9元",price_desc:"1年历史最低
价",price_now:"19.9",price_pre:"29.9",sale:"511",href:"item.jd/21562085787.html"},
{img:"img02.webp",title:"【第⼆件9.9】霜降圆柿饼2⽄装",desc:"第⼆件9.9元",price_desc:"38天历史最低
价",price_now:"19.9",price_pre:"39.9",sale:"130",href:"item.jd/62033699001.html"},
{img:"img03.webp",title:"第⼆件半价】融极厚切眼⾁5⽚",desc:"第⼆件半价",price_desc:"88天历史最低
价",price_now:"99",price_pre:"159",sale:"189",href:"item.jd/59888245671.html"},
{img:"img04.webp",title:"德州扒鸡500g ⼭东特产年货",desc:"88元选4件",price_desc:"134天历史最低
价",price_now:"23.9",price_pre:"36.9",sale:"266",href:"item.jd/20821451207.html"},
{img:"img05.webp",title:"九善⾷ 活冻厄⽠多尔⽩虾",desc:"2份⽴减",price_desc:"32天历史最低
价",price_now:"49",price_pre:"89",sale:"528",href:"item.jd/63882104774.html"},
{img:"img06.webp",title:"全母盛宴(2.0-2.3两)10只",desc:"现捕现发",price_desc:"82天历史最低
价",price_now:"98",price_pre:"189",sale:"35",href:"item.jd/60387540668.html"},
{img:"img07.webp",title:"态好吃100%纯可可脂⿊巧克⼒",desc:"买⼀送⼀丝滑细腻",price_desc:"181天历史最低价",price_now:"17.9",price_pre:"29.9",sale:"150",href:"item.jd/50895183185.html"},
{img:"img08.webp",title:"陶唐峪酱卤猪头⾁500g",desc:"下酒菜",price_desc:"86天历史最低
价",price_now:"29.5",price_pre:"49.8",sale:"140",href:"item.jd/58729017337.html"},
{img:"img09.webp",title:"乐锦记 ⼿撕⾯包2⽄/整箱1000g",desc:"整箱2⽄装",price_desc:"309天历史最
低价",price_now:"19.8",price_pre:"29.8",sale:"259",href:"item.jd/43443070344.html"},
{img:"img10.webp",title:"买⼀送⼀雪媚娘蛋黄酥330g/盒",desc:"买⼀送⼀共12枚",price_desc:"1年历史最低价",price_now:"27.8",price_pre:"39.8",sale:"292",href:"item.jd/25665431802.html"},
{img:"img11.webp",title:"五常有机稻花⾹500g(1⽄)",desc:"正宗五常⼤⽶",price_desc:"138天历史最低价",price_now:"19.9",price_pre:"29.9",sale:"10",href:"item.jd/56090150750.html"},
{img:"img12.webp",title:"湖南⽑⽑鱼 ⼩鱼⼲20包 糖醋",desc:"2件8折3件7折",price_desc:"230天历史最低价",price_now:"13.9",price_pre:"19.9",sale:"103",href:"item.jd/49202317748.html"},
]
init();
function init(){
let ateDocumentFragment();
for(let i=0;i
let main = new Main(arr[i],"./img/");
main.appendTo(frg);
}
document.body.appendChild(frg);
}
Main.js⽂件：根据数据创建商品列表。
import Utils from './Utils.js';
export default class Main {
static styles=false;
constructor(_list, basePath) {
//拼接图⽚的路径
if (basePath) _list.img = basePath + _list.img;
this.elem = ateElem(_list);
}
createElem(_list) {
if(this.elem) return this.elem;
let div = ateE("div");
div.className = "goodsContainer";
//页⾯结构
div.innerHTML = `
${_list.title}
${_list.desc}
${_list.price_desc}
￥${_list.price_now}
￥${_list.price_pre}
已卖${_list.sale}件
`;
//写样式
Main.setStyles();
return div;
}
appendTo(parent) {
Utils.appendTo(this.elem, parent); }
static setStyles() {
if(Main.styles) return;
Main.styles=true;
Utils.insertCss("body", { background: "#f5f5f5"
})
Utils.insertCss("body,div,p", { margin: "0px",
padding: "0px"
})
Utils.insertCss(".goodsContainer", { width: "290px",
height: "400px",
margin: "10px 0px 0px 10px", background: "#fff",
float: "left"
})
Utils.insertCss(".goodsInfo", { width:"270px",
paddingLeft:"20px", cursor:"pointer", textDecoration:"none"
})
Utils.insertCss(".goodsImg", { width: "200px",
height: "200px",
margin: "20px 0px 0px 25px"
})
Utils.insertCss(".goodsImg:hover", { position:"relative",
top:"-7px",
})
Utils.insertCss(".goodsTit", { fontSize: "14px",
color: "#333333",
margin: "0px 20px 10px", fontWeight: "bold",
textAlign: "left",
lineHeight: "20px",
height: "20px",
whiteSpace: "nowrap", textOverflow: "ellipsis",
overflow: "hidden", display:"block"
})
Utils.insertCss(".goodsDesc", { margin: "0px 0px 10px 20px", fontSize: "14px",
color: "#e01222", display:"block"
})
Utils.insertCss(".goodsPrice", { paddingLeft:"20px", paddingTop:"13px",
borderTop: "1px solid #f3f3f3" })
Utils.insertCss(".leftCon", {
float: "left"
})
Utils.insertCss(".priceDesc", {
padding: "0 8px",
height: "16px",
lineHeight: "16px",
backgroundColor: "#e6e6e6",
fontSize: "10px",
color: "#999",
borderRadius: "2px",
position: "relative",
marginBottom:"10px"
})
Utils.insertCss(".priceDesc:after", {
html如何下载content: "\".\"",
position: "absolute",
left: "0",
right: "0",
bottom: "-6px",
margin: "0 auto",
width: "0",
height: "0",
borderWidth: "3px",
borderStyle: "solid dashed dashed", borderColor: "#e6e6e6 transparent transparent", pointerEvents: "none",
})
Utils.insertCss(".priceNow", {
fontSize: "24px",
color: "#e01222",
marginRight: "2px",
lineHeight: "1",
minWidth: "50px",
marginBottom:"3px"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。