商城复合案例功能实现（一）
- 使用html，css，基于bootstrap框架以及媒体查询搭建响应式布局页面
- 案例共三页，包括首页板块，女装板块，以及单个商品板块，单击互相跳转
- 女装页包括tab栏，映射，数据筛选等功能，单个商品页包括轮播图，tab栏，商品放大镜，映射等功能，首页包含轮播图，映射等功能
商城单个商品页实现步骤
1.数据准备
项目包的结构
1. assets中images中放logo和二维码之类固定内容的图片，upholds中放可以替换的商品类图片
2. html，css，js，less中放各个板块的对应文件
2.渲染的数据
const initData = [
{
id: 1,
name: '绿色吊带裙',
price: 199,
discount: '100',
src: '../assets/upholds/otherContent1.png',
status: '特价'
},
{
id: 2,
name: '黑色吊带裙',
price: 299,
discount: '',
src: '../assets/upholds/otherContent2.png',
status: ''
},
{
id: 3,
name: '红色吊带裙',
price: 199,
discount: '',
src: '../assets/upholds/otherContent3.png',
status: ''
},
{
id: 4,
name: '粉色吊带裙',
price: 299,
discount: '190',
src: '../assets/upholds/otherContent4.png',
status: '特价'
},
{
id: 5,
name: '白色吊带裙',
price: 199,
discount: '',
src: '../assets/upholds/otherContent4.png',
status: ''
},
{
id: 6,
name: '蓝色吊带裙',
price: 299,
discount: '',
src: '../assets/upholds/otherContent4.png',
status: '售完'
},
{
id: 7,
name: '黄色吊带裙',
price: 199,
discount: '99',
src: '../assets/upholds/otherContent3.png',
status: '特价'
},
{
id: 8,
name: '紫色吊带裙',
price: 299,
discount: '',
src: '../assets/upholds/otherContent4.png',
status: '售完'
},
{
id: 9,
name: '棕色吊带裙',
price: 199,
discount: '100',
src: '../assets/upholds/otherContent3.png',
status: '特价'
},
{
id: 10,
name: '灰色吊带裙',
price: 299,
discount: '',
src: '../assets/upholds/otherContent1.png',
status: '售完'
},
{
id: 11,
name: '银色吊带裙',
price: 199,
discount: '',
src: '../assets/upholds/otherContent1.png',
status: ''
},
{
id: 12,
name: '黑色吊带裙',
price: 299,
discount: '',
src: '../assets/upholds/otherContent2.png',
status: '售完'
}
]
2. 搭建html框架
单个商品页
代码
1. logo制作要用logo>a,a中写logo名称，a设置为块元素，且文字大小为0
2. 页面中的版心居中可以用bootstrap中container类名，栅格化可以用row，配合col类名
3. 可以将通用组件样式封装在common.css中可以减少代码量
<!-- 导航栏 -->
<div class="nav container">
<div class="logo">
<a href="">优质商城</a>
</div>
<ul>
<li><a data-id="0" href="javascript:;" class="active">首页</a></li>
<li><a data-id="1" href="javascript:;">女装</a></li>
<li><a data-id="2" href="javascript:;">男装</a></li>
<li><a data-id="3" href="javascript:;">箱包</a></li>
<li><a data-id="4" href="javascript:;">特价</a></li>
</ul>
<div class="shopping">
<span class="iconfont icon-shopping-bag-3-fill"></span>
<div class="shopNum">
<span>1</span>
</div>
</div>
</div>
<!-- 服装内容 -->
<div class="costume-content container">
<div class="left slider col-xl-6 col-lg-12 col-sm-12 col-12">
<div class="jdk">
</div>
<img src="../assets/upholds/content0.png" alt="">
<ul>
<li><a data-id="0" href="javascript:;" class="active"></a></li>
<li><a data-id="1" href="javascript:;"></a></li>
<li><a data-id="2" href="javascript:;"></a></li>
</ul>
</div>
<div class="right col-xl-6 col-lg-12 col-sm-12 col-12">
<div class="largePic">
<div class="pic">
</div>
</div>
<div class="tag">碎花系列</div>
<h3>2018夏季青春红色吊带裙</h3>
<p>2018上新的夏季青春少女酒红碎花系列红色吊带裙，由英国时尚潮人服装大师大卫精心设计制作，纯手工制作，匠心打造！</p>
<ul>
<li><span class="price">价格：￥<strong>1999</strong></span></li>
<li>
<select name="" id="">
<option value="">数量</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</li>
<li>
<select name="" id="">
<option value="">大小</option>
<option value="">s</option>
<option value="">m</option>
<option value="">xl</option>
<option value="">xxl</option>
<option value="">定制</option>
</select>
</li>
<li>
<select name="" id="">
<option value="">颜色</option>
<option value="">红色</option>
<option value="">蓝色</option>
<option value="">绿色</option>
</select>
</li>
<li>
<button class="buy">立即购买</button><button class="addShopCart">加入购物车</button>
</li>
</ul>
</div>
<!-- 其他服饰 -->
<div class="other-content">
<h3>您也可能喜欢</h3>
<div class="other-costume">
<ul class="row">
<li class="col-xl-3 col-md-6 col-sm-6 col-12">
<div class="staus out"><span>售完</span></div>
<img src="../assets/upholds/otherContent1.png" alt="">
<div class="name">连衣裙</div>
<h3>绿色吊带裙</h3>
<!-- 如果有打折，价钱出现中划线 -->
<div class="price"><span class="normal">390.00</span> <span class="discount">200</span> </div>
</li>
<li class="col-xl-3 col-md-6 col-sm-6 col-12">
<div class="staus out"><span>售完</span></div>
<img src="../assets/upholds/otherContent2.png" alt="">
<div class="name">连衣裙</div>
<h3>蓝色性感裙子</h3>
<div class="price"><span class="normal">390.00</span> <span class="discount"></span></div>
</li>
<li class="col-xl-3 col-md-6 col-sm-6 col-12">
<div class="staus free"><span>特价</span></div>
<img src="../assets/upholds/otherContent3.png" alt="">
<div class="name">连衣裙</div>
<h3>弹力羊毛连衣裙</h3>
<div class="price"><span class="normal">390.00</span> <span class="discount"></span></div>
</li>
<li class="col-xl-3 col-md-6 col-sm-6 col-12">
<div class="staus out"><span>售完</span></div>
<img src="../assets/upholds/otherContent4.png" alt="">
<div class="name">连衣裙</div>
<h3>紫色吊带裙</h3>
<div class="price"><span class="normal">390.00</span> <span class="discount">200</span></div>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer container">
<ul class="row">
<li class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
<p class="copy">© 2018 Copyright fengcolor.com
All Rights Reserved.</p>
<p class="tel">020-8525866 info@fengcolor.com</p>
<p class="address">中国
广州市白云区丰彩服装定制工作室
510000</p>
</li>
<li class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
<dl>
<dd><a href="">男性专区</a></dd>
<dd><a href="">女性专区</a></dd>
<dd><a href="">箱包专区</a></dd>
<dd><a href="">鞋子专区</a></dd>
<dd><a href="">特价专区</a></dd>
</dl>
</li>
<li class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
<dl>
<dd><a href="">关于我们</a></dd>
<dd><a href="">运费说明</a></dd>
<dd><a href="">常见问题</a></dd>
<dd><a href="">联系我们</a></dd>
<dd><a href="">售后服务</a></dd>
</dl>
</li>
<li class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12"><img src="../assets/images/code.png" alt=""></li>
</ul>
实现效果
3. 编写js代码
tab栏
事件委托和自定义属性
const nav = document.querySelector('.nav')
nav.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
document.querySelector('.nav .active').classList.remove('active')
e.target.classList.add('active')
}
})
实现效果
轮播图
数据获取，事件委托，自定义属性
const detail = JSON.parse(localStorage.getItem('detail'))
console.log(detail)
const signal = document.querySelector('.tag')
signal.nextElementSibling.innerHTML = detail.name
const signalPrice = document.querySelector('.right .price')
console.log(signalPrice)
signalPrice.children[0].innerHTML = detail.price
const img = document.querySelector('.slider img')
const sliderLis = document.querySelectorAll('.slider li')
let sliderTimer
let num = 0
function play() {
sliderTimer = setInterval(() => {
num++
if (num >= 3) {
num = 0
}
img.src = `../assets/upholds/content${num}.png`
for (let i = 0; i < sliderLis.length; i++) {
sliderLis[i].children[0].classList.remove('active')
}
sliderLis[num].children[0].classList.add('active')
}, 2000)
}
play()
const slider = document.querySelector('.slider')
slider.addEventListener('mouseenter', () => {
clearInterval(sliderTimer)
})
slider.addEventListener('mouseleave', () => {
play()
})
slider.addEventListener('mouseover', (e) => {
if (e.target.tagName === 'A') {
document.querySelector('.slider .active').classList.remove('active')
for (let i = 0; i < sliderLis.length; i++) {
sliderLis[e.target.dataset.id].children[0].classList.add('active')
img.src = `../assets/upholds/content${e.target.dataset.id}.png`
}
}
})
实现效果
商品放大镜
商品放大镜算法，原理见我的主页内容
const jdk = document.querySelector('.left .jdk')
const left = document.querySelector('.left')
const largePic = document.querySelector('.right .largePic')
const pic = document.querySelector('.largePic .pic')
let fdjTimer = 1
function out() {
clearInterval(fdjTimer)
largePic.style.display = 'block'
jdk.style.display = 'block'
}
function none() {
fdjTimer = setTimeout(() => {
largePic.style.display = 'none'
}, 200)
jdk.style.display = 'none'
}
const i = document.documentElement
console.log(i.scrollTop)
left.addEventListener('mouseenter', out)
left.addEventListener('mouseleave', none)
largePic.addEventListener('mouseenter', out)
largePic.addEventListener('mouseleave', none)
left.addEventListener('mousemove', (e) => {
const img = document.querySelector('.left img')
pic.style.backgroundImage = `url(${img.src})`
const mouseX = e.pageX - left.getBoundingClientRect().left
const mouseY = e.pageY - left.getBoundingClientRect().top
let jdkX = mouseX - jdk.offsetWidth / 2
let jdkY = mouseY - jdk.offsetHeight / 2
jdk.style.left = `${jdkX}px`
jdk.style.top = `${jdkY}px`
if (jdkX < 0) {
jdkX = 0
jdk.style.left = jdkX
}
if (jdkY < 0) {
jdkY = 0
jdk.style.top = jdkY
}
if (jdkX > left.offsetWidth - jdk.offsetWidth) {
jdkX = left.offsetWidth - jdk.offsetWidth
console.log(jdkX)
jdk.style.left = `${jdkX}px`
}
if (jdkY > left.offsetHeight - jdk.offsetHeight) {
jdkY = left.offsetHeight - jdk.offsetHeight
console.log(jdkY)
jdk.style.top = `${jdkY}px`
}
// 所占比例
bili = 320 / left.offsetWidth
pic.style.backgroundPosition = `-${jdkX * bili}px -${jdkY * 2}px`
})
实现效果
随机商品渲染
定义随机数，从数据中抽取4个随机数据，并进行渲染
const ul = document.querySelector('.other-costume .row')
function addData(arr) {
let str = ''
arr.filter(({ name, price, discount, src, status }) => {
let soldStatus
if (status === '售完') {
soldStatus = 'out'
} else if (status === '特价') {
soldStatus = 'free'
} else {
soldStatus = ''
}
const arr = `<li class="col-xl-3 col-md-6 col-sm-6 col-12">
<div class="staus ${soldStatus}"><span>${status}</span></div>
<img src="${src}" alt="">
<div class="name">连衣裙</div>
<h3>${name}</h3>
<!-- 如果有打折，价钱出现中划线 -->
<div class="price"><span class="normal">${price}</span> <span class="discount">${discount}</span> </div>
</li>`
return str += arr
})
ul.innerHTML = str
}
const randomArr = []
for (let i = 0; i < 4; i++) {
const random = Math.floor(Math.random() * initData.length)
randomArr.push(initData[random])
}
addData(randomArr)
实现效果
点击进入单个商品
进入单个商品后记录其图片，名称，价钱等数据，再进行动态渲染
const lis = document.querySelectorAll('.other-costume li')
lis.forEach(li => {
li.addEventListener('click', () => {
const img = li.querySelector('img')
const src = img.getAttribute('src')
const name = li.querySelector('h3').textContent
const price = li.querySelector('.price .normal').textContent
const discount = li.querySelector('.price .discount').textContent
const status = li.querySelector('.staus span').textContent
const detail = {
src,
name,
price,
discount,
status
}
localStorage.setItem('detail', JSON.stringify(detail))
location.href = '../html/signalCostume.html'
})
})
实现效果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
