Skip to content

G
Guanxianwaimai

冬冬的 / Guanxianwaimai

通知 1
Star 0
Fork 0
G
Guanxianwaimai

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7cfe3856 编写于 作者: 冬冬的's avatar 冬冬的
浏览文件
操作

上传新文件

上级 d395a297
隐藏空白更改
内联 并排
Showing with 416 addition and 0 deletion
index.html 0 → 100644
浏览文件 @ 7cfe3856
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>光线外卖</title>
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="description"
content="光线是中国专业的网上订餐平台，目前已覆盖北京、上海、杭州、广州等300多个城市，提供各类中式、日式、韩式、西式、下午茶、夜宵等优质美食，并提供送餐上门服务，让订餐更加轻松，叫外卖就上光线！">
<meta name="keywords" content="光线，网上订餐，外卖，快餐外卖，外卖网">
<meta name="format-detection" content="telephone=no,email=no">
<script src="js/flexible.js"></script>
<script src="js/flexible_css.js"></script>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>
<body>
<div class="seachbar">
<input type="text" value="搜索">
</div>
<div class="layout" >
<div class="main" >
<div class="top_loading loading" hidden>
下拉刷新中<br>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 顶部区域 -->
<section class="top_bar">
<!-- 顶部栏 -->
<div class="top">
<div class="location"><i class="iconfont icon-location"></i>定位</div>
<div class="message">消息</div>
</div>
<!-- 搜索区域 -->
<div class="search">
<input type="text" value="搜索">
</div>
</section>
<!-- 轮播图 -->
<div class="swiper-container" id="banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/banner01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/banner01.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/banner01.jpg" alt="">
</div>
</div>
</div>
<!-- 导航 -->
<div class="swiper-container" id="nav">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon01.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon02.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon03.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon04.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon05.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon06.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon07.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon01.png" alt="">
<span>美食</span>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="nav_item">
<img src="./img/icon/icon01.png" alt="">
<span>美食</span>
</a>
</div>
</div>
</div>
<!-- 本地特产 -->
<section class="specialty">
<div class="title">
<h2>本地特产</h2>
</div>
<div class="content">
<div class="item">
<div class="img">
<a href="#">
<img src="./img/specil02.jpg" alt="">
</a>
</div>
<div class="text">
<h3><a href="#">酥梨</a></h3>
<p>产自李县的特色酥梨，饱满、味甜,深得各地人民的喜爱.</p>
</div>
</div>
<div class="item">
<div class="img">
<a href="#">
<img src="./img/specil01.jpg" alt="">
</a>
</div>
<div class="text">
<h3><a href="#">酥梨</a></h3>
<p>产自李县的特色酥梨，饱满、味甜,深得各地人民的喜爱.</p>
</div>
</div>
<div class="item">
<div class="img">
<a href="#">
<img src="./img/specil01.jpg" alt="">
</a>
</div>
<div class="text">
<h3><a href="#">酥梨</a></h3>
<p>产自李县的特色酥梨，饱满、味甜,深得各地人民的喜爱.</p>
</div>
</div>
</div>
<div class="refresh">
<span>换一批</span>
</div>
</section>
<!-- 广告 -->
<section class="adv">
<img src="./img/banner02.jpg" alt="">
</section>
<!-- 推荐商家 -->
<section class="merchants">
<div class="title">
<h2>推荐商家</h2>
</div>
<div class="content">
<!-- 内容区域顶部小导航 -->
<div class="swiper-container" id="merchants_nav">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="active">综合排名</span></div>
<div class="swiper-slide">
<span>销售最高</span>
</div>
<div class="swiper-slide">
<span>速度最快</span></div>
<div class="swiper-slide">
<span>距离最近</span></div>
<div class="swiper-slide">
<span>距离最近</span></div>
<div class="swiper-slide">
<span>距离最近</span></div>
<div class="swiper-slide">
<span>距离最近</span></div>
<div class="swiper-slide">
<span>距离最近</span></div>
<div class="swiper-slide">
<span>距离最近</span></div>
<div class="bar">
<div class="color"></div>
</div>
</div>
</div>
</div>
<!-- 内容列表 -->
<div class="list">
<!-- 内容区域顶部小导航 -->
<div class="swiper-container" id="me_list">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
<div>热卖</div>
</div>
<div class="swiper-slide">
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
<div>水果</div>
</div>
<div class="swiper-slide">
<span>乳品</span></div>
<div class="swiper-slide">
<span>零食</span></div>
<div class="swiper-slide">
<span>肉蛋</span></div>
<div class="swiper-slide">
<span>蔬菜</span></div>
<div class="swiper-slide">
<span>酒饮</span></div>
<div class="swiper-slide">
<span>速食</span></div>
<div class="swiper-slide">
<span>熟食</span></div>
<div class="swiper-slide">
<span>水产</span></div>
<div class="swiper-slide">
<span>粮油</span></div>
<div class="swiper-slide">
<span>轻食</span></div>
<div class="swiper-slide">
<span>火锅</span></div>
<div class="swiper-slide">
<span>日百</span></div>
<div class="bar">
<div class="color"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- 底部的标签栏 -->
<section class="tabbar">
<button id="btn">点击</button>
</section>
<script src="js/better-scroll.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function(){
var banner = new Swiper("#banner",{
loop:true
});
var nav = new Swiper("#nav",{
slidesPerView: 6.4,
});
var wrapper = document.querySelector(".layout")
var bs = BetterScroll.createBScroll(wrapper, {
probeType:2,
// 开启上拉刷新
pullDownRefresh: true
})
//获取search距离顶部的距离
var top_dom = document.querySelector(".top_bar");
var top = top_dom.clientHeight;
var seachbar = document.querySelector(".seachbar");
console.log();
// 滑动处理search吸顶效果
bs.on("scroll",function(pos){
var scrollTop = Math.abs(pos.y);
// console.log(scrollTop);
if(scrollTop>=top+400){
seachbar.style.top = 0;
}else{
seachbar.style.top = "-2000px";
}
})
bs.on("scrollEnd",function(pos){
var scrollTop = Math.abs(pos.y);
// console.log(scrollTop);
if(scrollTop<top+400){
seachbar.style.top = "-2000px";
}
})
// 监听下拉触底
bs.on('pullingDown', function(){
document.querySelector(".top_loading").hidden = false;
setTimeout(function(){
document.querySelector(".top_loading").hidden = true;
bs.finishPullDown()
},3000)
})
//推荐商家的导航
var merchants_nav = new Swiper("#merchants_nav",{
slidesPerView: 4,
});
// 商家的底部内容的滑动列表
var me_list = new Swiper("#me_list",{
slidesPerView: 1,
});
// 监听商家列表的滑动
me_list.on("touchEnd",function(){
// 直接拿到是滑动前的索引值
setTimeout(()=>{
// 滑动后的索引值
var index = this.activeIndex;
// 滑动列表让顶部的导航 滑动到指定的索引值位置
merchants_nav.slideTo(index,300);
// 顶部导航的所有的滑块
var slides = merchants_nav.slides;
// 让所有元素清空class
slides.find('span').forEach(function(item){
item.className = "";
});
// 当前自己的添加class
slides.find('span')[index].className = "active";
// 找到滑动线条
var bar = merchants_nav.$el[0].querySelector(".bar");
// 获取当前导航一屏的显示个数
var views_num = merchants_nav.passedParams.slidesPerView;
// 滑动线条 进行left更改移动
bar.style.left = 1/views_num * index * 100 + "%";
},200)
})
// 点击上方商家导航
merchants_nav.on("tap",function(){
// 获取当前索引
var clickedIndex = this.clickedIndex;
// 点击的当前滑块
var clickSlide = this.slides.eq(clickedIndex);
// 清空所有滑块项的class
this.slides.find('span').forEach(function(item){
item.className = "";
})
// 点击的元素添加class
clickSlide.find('span')[0].className = "active";
// 控制下面的列表内容滚动到对应的位置
me_list.slideTo(clickedIndex,300);
// 获取当前一屏的个数
var views_num = this.passedParams.slidesPerView;
// 滑动的线条
var bar = this.$el[0].querySelector(".bar");
// 线条进行移动
bar.style.left = 1/views_num * clickedIndex * 100 + "%";
})
})
// https://better-scroll.github.io/docs/zh-CN/plugins/pulldown.html#%E4%BD%BF%E7%94%A8
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或