<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天美</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/home.css">
<script src="/static/layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="/static/css/front_index.css">
<style>
.layui-tab-title .layui-this:after {
margin-top: 30px;
}
</style>
</head>
<!--font-family: regular-->
<body style="background-color: #f5f5f5;font:12px/1 Tahoma,Helvetica,Arial,'微软雅黑',sans-serif;">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-col-xs12"
style="height:120px;background-color:whitesmoke;margin: 0 auto;position: fixed;z-index: 3">
<div class="layui-col-xs2">
<li class="layui-icon layui-icon-search"
style="width:100px;font-size: 80px;margin-left: 50px;margin-top: 20px"></li>
</div>
<div class="layui-col-xs10" style="margin-top: 20px">
<input id="search_data"
style="width: 70%;border-radius: 20px;outline: none; height: 80px;font-size: 40px;float: left"
type="text"
name="title" autocomplete="off" placeholder="输入搜索内容" class="layui-input">
<button onclick="search()" type="button" class="layui-btn layui-btn-warm layui-btn-radius"
style="width:180px;height:80px;margin-left:20px;font-size:40px;float: left">搜索
</button>
</div>
</div>
<div class="layui-col-xs12" style="margin-top: 140px">
<div class="layui-carousel layui-form-text " id="lunbotu">
<div carousel-item="">
{volist name="data" id="vo"}
<div><img src="{$vo.imgurl}" style="width:100%;height: 400px"/></div>
{/volist}
</div>
</div>
</div>
<hr class="layui-bg-green">
<div class="layui-col-xs12" style="margin-top: 2%;background-color: white;padding: 20px">
{volist name="menudata" id="vo"}
<div onclick="nav('{$vo.label}')" id="nav{$vo.id}" class="layui-col-xs3" style="margin-top: 10px;">
<div>
<img src="{$vo.imgurl}" style="display:block;width: 140px;height: 140px;margin: 0 auto;
box-shadow: 0 0 10px black;border-radius: 50%;"/>
<div style="font-family: '黑体';text-align: center;font-size: 40px;margin:10px auto">
{$vo.label}
</div>
</div>
</div>
{/volist}
</div>
<!-- 热销商品-->
<div class="layui-col-xs12" style="background-color: white;margin: 20px auto;padding: 20px">
<label style="margin-left: 20px;font-size: 40px;border-left: 12px solid orange;padding-left: 10px;">
热销商品
</label>
<div class="layui-col-xs12">
<div id="rx_shop" class="rx_shop">
<!-- 异步参数加载图片-->
</div>
</div>
</div>
<!-- 猜你喜欢-->
<label id="tjsp" style="margin-left: 20px;margin-bottom:10px;font-size: 40px;border-left: 12px solid orange;padding-left: 10px;">
推荐商品
</label>
<div class="layui-bg-gray layui-col-xs12" style="margin-top: 50px">
<div class="layui-tab layui-tab-brief">
<ul id="tab_par" class="layui-tab-title"
style="height:70px;background-color:white;padding-bottom:10px;display: flex;justify-content: space-around;margin-bottom: 10px;margin: 2px auto">
<li onclick="tabclick(this)" class="layui-this"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">全部
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">服装
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">美妆
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">家电
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">运动
</li>
</ul>
<ul id="tab_mu" class="layui-tab-title"
style="height:70px;background-color:white;padding-bottom:10px;display: flex;justify-content: space-around;margin: 2px auto">
<li onclick="tabclick(this)" class="layui-this"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;vertical-align: middle;">
综合
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">生鲜
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">食品
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">车饰
</li>
<li onclick="tabclick(this)"
style="line-height: normal;font-size: 40px;width: 150px;padding-top:1%;">券后价
</li>
</ul>
<!-- <div class="layui-tab-content">-->
<!-- <div class="layui-tab-item layui-show">-->
<!-- </div>-->
<!-- <div class="layui-tab-item">内容2</div>-->
<!-- <div class="layui-tab-item">内容3</div>-->
<!-- <div class="layui-tab-item">内容4</div>-->
<!-- <div class="layui-tab-item">内容5</div>-->
<!-- </div>-->
</div>
<div id="like_shop">
<!-- js异步数据-->
</div>
</div>
</div>
<div class="layui-col-xs12" style="height: 250px">
<div class="bottom" id="load_bo">
<img src="/static/image/load.gif">
<p>商品正在来的路上~</p>
</div>
</div>
<div id="temlet" class="tm_tab">
</div>
</div>
<script>
layui.use(['form', 'carousel', 'upload', 'jquery', 'layer', 'element'], function () {
var form = layui.form;
var carousel = layui.carousel;
var upload = layui.upload;
var layer = layui.layer;
var $ = layui.$;
var element = layui.element;
var text_e = "全部";
var counts = 1;
var imgs = "";
//底部导航模板
$("#temlet").load('{:url("wxapi/temlet")}');
//轮播图
carousel.render({
elem: '#lunbotu'
, width: '100%' //设置容器宽度
, height: '400px'
, arrow: 'none' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
nav = function (e) {
window.location.href = "{:url('model')}?label=" + e;
console.log(e)
};
//请求数据加载动画
var loading = layer.load(0, {
shade: false
, size: 200
, time: 10 * 1000
});
$.ajax({
url: '{:url("lmtg")}'
, type: 'post'
, dataType: 'json'
, success: function (e) {
e.forEach(function (value, key, ar) {
$('#rx_shop').append('<div οnclick="url(\'' + ar[key]["destUrl"] + '\')" class="rx_shop_item">' +
'<img src=' + ar[key]["goodsThumbUrl"] + '>' +
'<br><label>¥' + ar[key]["vipPrice"] + '</label><s>¥' + ar[key]["marketPrice"] + '</s>' +
'</div>')
})
layer.close(loading)
}
, error: function (res) {
console.log(res)
}
})
url = function (e) {
console.log(e)
window.location.href = e;
}
window.onload=function (){
var e;
tabclick();
}
//tab事件
tabclick = function (e, d, cot,tmcount) {
// var ta = document.getElementById('tab_par').getElementsByTagName('li')
// var tb = document.getElementById('tab_mu').getElementsByTagName('li')
// for (var i = 0; i < ta.length; i++) {
// console.log(ta[i].getAttribute('class'))
// }
var text
//判断是否是搜索
if (d == 1) {
text = e
console.log(text)
} else {
if (e == "") {
text = text_e
} else {
text = e.innerHTML||e
if(text_e != text){
counts=1
}
text_e = text
}
}
console.log('page' + counts)
//推荐商品
$.ajax({
url: '{:url("xhshop")}'
, type: 'post'
, data: {'data': text, 'page': counts}
, dataType: 'json'
, success: function (e) {
if (e.length == 0) {
layer.msg('<span style="font-size:30px">暂无该商品!</span>', {icon: 3})
return false;
}
console.log(e)
//判断是否滚动事件
if(tmcount !='tmcount'){
$('#like_shop').empty()
}
e.forEach(function (value, key, ar) {
$('#like_shop').append('<div οnclick="like(\'' + ar[key]["goodsId"] + '\')" class="layui-col-xs12"> <div class="layui-col-xs5" style="margin-bottom: 20px">\n' +
' <div class="like_left">\n' +
' <img src="/static/image/load1.gif" data-src="' + ar[key]["goodsThumbUrl"] + '"/>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-col-xs7" style="margin-bottom: 20px">\n' +
' <div style="padding-right: 10px">\n' +
' <span class="layui-badge" style="font-size: 35px;height: 35px;padding-top: 10px">' + ar[key]["storeName"] + '</span>\n' +
' <label style="font-size: 40px;line-height: 60px;color: black;">' + ar[key]["goodsName"] + '</label>\n' +
' <div style="margin-top: 2%">\n' +
' <label style="font-size: 30px; color: #FD482C;font-weight: bold;">唯品价¥\n' +
' <label style="font-size: 50px"> ' + ar[key]["vipPrice"] + '</label>\n' +
' </label>\n' +
' <s style="margin-left: 20px;font-size: 30px;">市场价¥' + ar[key]["marketPrice"] + '</s>\n' +
' </div>\n' +
' <div class="zhekou">折扣:' + ar[key]["discount"] + '</div>\n' +
' </div>\n' +
' </div></div>')
})
layer.close(loading)
imgs = document.getElementById('like_shop').getElementsByTagName('img')
lazyload(imgs);
}
, error: function (res) {
console.log(res)
$('#load_bo').empty()
$('#load_bo').append('<p>暂无更多商品</p>')
}
})
}
//列表进入内页
like = function (e) {
console.log(e)
window.location.href = '{:url("neiye")}?id='+e;
}
//搜索事件
search = function () {
var data = document.getElementById('search_data').value
tabclick(data, 1)
$('body,html').animate({
scrollTop: $("#tjsp").offset().top-150
},
500
);
}
// 获取到浏览器顶部的距离
function getTop(e) {
var T = e.offsetTop;
while (e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
function countad(){
return counts++;
}
// 懒加载实现
function lazyload(imgs) {
// 可视区域高度
var e="", d;
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
//加载更多
if ((h + s) == document.documentElement.scrollHeight) {
this.tabclick(e, d, countad(),tm='tmcount')
}
for (var i = 0; i < imgs.length; i++) {
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h + s) > getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function (i) {
setTimeout(function () {
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只会请求一次
// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
temp.onload = function () {
// 获取自定义属性data-src,用真图片替换假图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
}, 1)
})(i)
}
}
}
// 滚屏函数
window.onscroll = function () {
lazyload(imgs);
}
})
</script>
</body>
</html>
图片懒加载实现
最新推荐文章于 2021-12-28 16:34:08 发布