整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
vue.js实现简单结算页面常见内容，即计算产品数量增减，计算总和价格等，初学vue.js，如有不正确之处，请多多指教！
实现效果：
实现代码
html:
css:
javascript：
用HTML、CSS和JavaScript构建响应式企业官网，web网页设计与制作-html+css+js实现企业官网展示。
页面效果展示
pc端和移动端
动态演示
assets文件夹：静态资源目录，主要存放css、fonts、images、js等静态资源文件；
favicon.ico文件：网站图标；
index.html文件：首页html，主要的页面结构与布局；
适用于期末HTML大作业、课设项目、毕设项目等，更适用于商用，企业官网展示等。
页面结构代码
页面结构清晰，布局合理，纯原生实现响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="keywords" content="ChatChat, Chat, 木番薯, 电子商务, 微信商城">
<meta name="description" content="关于您所想所悟我们知道您一直想付诸实现，木番薯服务不止于单纯的信息服务，我们将全程与您一同创建打造。
依托于木番薯服务与技术团队超过十年的经验积累，我们有能力成为您细细专业领域的左膀右臂。">
<title>木番薯网络科技</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./assets/dist/css/lib.css">
<link rel="stylesheet" href="./assets/dist/css/common.css">
<link rel="stylesheet" href="./assets/dist/css/index.css">
</head>
<body>
<!-- 导航栏 -->
<div class="header container-fluid" id="pc-header">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="fl" href="#" title="ChatChat">
<img class="logo" src="./assets/dist/images/index/logo.png" alt="">
</a>
</div>
<div id="bs-navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="javascript：void(0);" data-maodian="based-on">电子商务微信商城</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="weixin-dev">个性化100%开发</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="procurement-distribution">采购分销平台订制</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="about-us">关于我们</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="quick-contact">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end 导航栏 -->
<!-- banner -->
<div class="jumbotron">
<img class="banner-pic" src="./assets/dist/images/index/banner.jpg" alt="">
<div class="banner-txt">
<h2>有好的想法付诸实现</h2>
<p>交给木番薯科技</p>
<p><a class="btn btn-primary btn-lg" href="javascript：void(0);" data-maodian="about-chat" role="button">了解更多</a></p>
</div>
</div>
<!-- end banner -->
<!-- 关于 -->
<div class="about-chat" id="about-chat">
<div class="container">
<h3>关于木番薯</h3>
<p>关于您所想所悟我们知道您一直想付诸实现，木番薯服务不止于单纯的信息服务，我们将全程与您一同创建打造。</p>
<p>依托于木番薯服务与技术团队超过十年的经验积累，我们有能力成为您细细专业领域的左膀右臂。</p>
<div class="row example-box">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="f-example">
<div class="i-box">
<img class="i-img" src="./assets/dist/images/index/icon1.png" alt="">
</div>
<h4>赠送ESC云服务</h4>
<p>所有签约客户均可获赠</p>
<p>一年期阿里云服务</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="f-example">
<div class="i-box">
<img class="i-img" src="./assets/dist/images/index/icon2.png" alt="">
</div>
<h4>产品梳理能力</h4>
<p>我们为客户交付高保真原型</p>
<p>确保需求梳理到位</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="f-example">
<div class="i-box">
<img class="i-img" src="./assets/dist/images/index/icon3.png" alt="">
</div>
<h4>开发技术核心</h4>
<p>开发团队为您挑选</p>
<p>一线资深技术工程师</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="f-example">
<div class="i-box">
<img class="i-img" src="./assets/dist/images/index/icon4.png" alt="">
</div>
<h4>承诺按时交付</h4>
<p>保质保量按时交付</p>
<p>是我们的最低标准</p>
</div>
</div>
</div>
</div>
</div>
<!-- end 关于 -->
<!-- 基于 -->
<div class="based-on" id="based-on">
<div class="container">
<h3>基于微信平台的移动电子商务整合</h3>
<div class="row based-box">
<div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5">
<div class="f-based">
<h4>
<img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
丰富电子商务过往开发经验
</h4>
<p>从PC端到移动端，从网上一般贸易到跨境电商，都是我们的主战场</p>
</div>
</div>
<div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1">
<div class="f-based">
<h4>
<img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
从基础模块到定制开发
</h4>
<p>多年积累基础模块涵盖商品、促销优惠、购物车、会员、积分、订单、支付，同时也仍然保留了较大的空间为您定制</p>
</div>
</div>
<div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5">
<div class="f-based">
<h4>
<img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
注重交互设计客户体验
</h4>
<p>好的产品总是从第一面开始，死磕细节，我们不会忘记客户永远是第一位的</p>
</div>
</div>
<div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1">
<div class="f-based">
<h4>
<img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
安全与性能已为您考虑周全
</h4>
<p>网络安全数据安全一直是我们努力进步完善的方向。布局Linux平台，启用SSL，配置安全策略，加密算法可以全部都有</p>
</div>
</div>
</div>
</div>
</div>
<!-- end 基于 -->
<!-- 微信订制开发 -->
<div class="weixin-dev" id="weixin-dev">
<div class="container">
<h3>微信订制开发</h3>
<p>如果目前市面上众多的标准产品已无法满足您的需求，</p>
<p>不妨考虑我们的100%真订制开发</p>
<div class="row dev-box">
<div class="col-xs-10 col-sm-10 col-md-3">
<div class="f-dev">
<h4>
<span class="i-num at-right">01</span>
梳理您的需求
</h4>
<p>老板说首先应当谈需求而不是谈钱，梳理您的需求，为您将需求转换为直观可靠的原型产品才是正经</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-right">02</span>
了解您的应用场景
</h4>
<p>在我们看来，系统不是一个鼓励的个体，而应当是一个生态。好的企业生态使客户满意，使员工满足</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-right">03</span>
开始量身订制
</h4>
<p>开发订制过程中，我们仍然将保持与客户进行必要的沟通、反馈。已签约项目将会与匹配一位产品经理</p>
</div>
</div>
<div class="col-md-4 col-md-offset-1 visible-md visible-lg">
<img class="phone-img" src="./assets/dist/images/index/phone.png" alt="">
</div>
<div class="col-xs-10 col-xs-offset-2 col-sm-10 col-sm-offset-2 col-md-3 col-md-offset-1">
<div class="f-dev">
<h4>
<span class="i-num at-left">04</span>
适当调整适应变化
</h4>
<p>我们知道唯有变化为不变，所以在项目开发启动后，我们仍然接受客户进行适当必要的需求变更</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-left">05</span>
邀请客户参与内测
</h4>
<p>当项目具备整体测试条件，我们将会邀请客户一同参与内测完善项目产品，以期望达成完美目标</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-left">06</span>
交付产品与源代码
</h4>
<p>除了交付项目产品，我们亦可有偿交付项目源代码，以便于您交付自身开发团队进行维护、迭代、升级、改造</p>
</div>
</div>
</div>
</div>
</div>
<!-- end 微信订制开发 -->
<!-- 采购分销平台订制 -->
<div class="procurement-distribution" id="procurement-distribution">
<div class="container">
<h3>采购分销平台订制</h3>
<p>集中一站式采购／多样化层级分销／统一管理售后</p>
<div class="row procurement-box">
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-procurement">
<h4>
集中一站式采购
</h4>
<span class="f-btn">账户邀请审核限定门槛</span>
<ul>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
跨类目商品
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
多仓库管理
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
批量采购导入
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
多种支付方式
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-procurement">
<h4>
多样化层级分销
</h4>
<span class="f-btn">公司企业个人层级划分</span>
<ul>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
商品设置可见
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
品牌折扣差异
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
引入信用额度
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
返点月度结算
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-procurement">
<h4>
统一管理售后
</h4>
<span class="f-btn">对接内部ERP打通关键</span>
<ul>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
管理后台隔离
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
配置OpenAPI
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
报表统计分析
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
权限账户限定
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end 采购分销平台订制 -->
<!-- 快速联系我们 -->
<div class="quick-contact" id="quick-contact">
<div class="container">
<h3>快速联系我们</h3>
<div class="quick-box">
<div class="f-quick">
<img class="i-img" src="./assets/dist/images/index/quick.png" alt="">
<div class="email-box">
<a href="mailto:mengchatchat@qq.com" class="btn btn-primary btn-lg email-btn">发送邮件</a>
</div>
</div>
</div>
</div>
</div>
<!-- end 快速联系我们 -->
<!-- 关于我们 -->
<div class="about-us" id="about-us">
<div class="container">
<div class="row about-box">
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-about">
<h4>
木番薯科技
</h4>
<p>木番薯，您身边的微信小程序专家</p>
<p>联系邮箱：mengchatchat@qq.com</p>
<p>公众号：木番薯科技</p>
<p>木番薯地址：广东省广州市海珠区</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-about">
<h4 class="us-txt">
关于我们
</h4>
<p class="desc-txt">
一群热爱互联网的80后90后，运用我们的专业为您出谋划策。在微信运用越来越广的今天，也希望有我们助您走的更远！
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-about text-center">
<img class="i-img" src="./assets/dist/images/index/erweima.jpg" alt="">
<p class="erweima-txt">
扫描二维码，关注我们
</p>
</div>
</div>
</div>
<div class="bottom-desc">
<p>© 2023 木番薯科技 版权所有 粤ICP备16024352-1</p>
<p>广州爱范电子商务有限公司</p>
</div>
</div>
</div>
<!-- end 关于我们 -->
<script src="./assets/dist/js/lib.js"></script>
<script src="./assets/dist/js/common.js"></script>
<script src="./assets/dist/js/index.js"></script>
</body>
</html>请点赞+收藏哦。至于css、js、图片等资源文件、源码文件，可.关.~注↓公.Z.号 获取。
[木番薯科技]
辑导语：在上下滚动页面时，除了出现吸顶，还会出现吸底、锚点等情况，那么这些都是在滚动页面时需要注意的控件。本文作者结合最近工作中的实际项目，对于滑动时的吸顶、锚点规则方式的总结心得，一起来学习下吧。
上下滚动页面时，除了出现吸顶，还会出现吸底、锚点等情况，这些都是在滚动页面时需要注意的控件。
结合最近工作中的实际项目，Cassie将滑动用到的场景进行了提炼，总结出这份控件设计规范，一起来学习吸底、锚点是如何在APP以及PC端应用的吧～
PC端及移动端的底部有一些操作栏，比如表单的填写操作或者支付按钮的放置，移动端底部还会有全局的导航栏，这些会占用一定的空间，可以根据使用场景灵活选择吸底方式。
需要注意吸底的是具有操作价值的内容，吸底元素包括操作按钮、 引导操作、移动端的导航栏…
PC端在表单内容较多、查看内容文章、需要引导用户操作比如支付等场景下，当用户需滑动查看更多内容，可将操作类按钮吸底，需要吸底的内容可以根据布局调整显示。
在左图PC端钉钉邮箱中，属于编辑表单类的，将发送操作按钮固定吸底，用户只需要修改部分字段，更利于快速完成编辑；在PC端简书中，属于内容展示类的，出于增强互动的目的，将评论、点赞等操作固定在底部增加其操作便捷性。
考试星PC端采用左中右布局，将提交考试放在右侧底部，可以不占用考试内容高度空间；百度学术PC端采用左右布局，右侧是一些介绍内容，所以操作按钮固定在和之有直接关系的左侧内容底部。
移动端底部常会有一些吸底的控件，比如底部导航栏、主操作按钮、需要引导或便捷用户操作的控件等。
一级页面导航固定在底部，当该页面有主按钮，比如结算等则将该栏放到导航栏上面，如果还有引导类或便捷操作类控件则再放到主操作栏上面。
移动端，特别是购物车场景存在多条吸底内容。
具有引导性的操作，为了配合主操作而出现，也是固定在底部，但位于底部操作上面，在特定场景下出现。
比如闲鱼提供了一些常用问题，可以跟卖家交流更便捷；考拉海购购物车的优惠引导也是固定在底部，类似的还有京东、淘宝等购物车。
当PC端展示内容分多段，且其中有需要引导用户操作的按钮，建议在滚动到该段时将该操作按钮吸底，滚动到另外一段内容后再取消吸底。
考拉海购PC端的购物车页面，如果购物车内容比较多，支付栏是吸底的，向上滚动到购物车商品内容结束后，支付栏不吸底，下面展示推荐商品。
京东官网的购物车也是这种方式，但移动端主流购物车的支付都是固定在底部的。
吸底内容可以根据具体情况显示或隐藏，这种非固定的方式常用于移动端阅读及查看话题评论时。
在微信读书的阅读状态时，为了给读者提供沉浸式体验，隐藏操作栏，上滑时再显示；在知乎热榜浏览主题内容时，主操作栏跟在内容下面，当页面滑动后主操作栏改变布局样式吸底展示。
锚点以回到顶部也属于页面滚动时需要的控件，配合滚动条用于跳转到页面指定位置。
PC端和移动端都可以在内容过多时使用回到顶部控件，PC端的锚点定位类似导航一样可以放到页面左侧或者右侧，但其实只是页面的内容定位。
移动端可以利用滚动条做时间轴类型的定位或者分页定位。
当PC端页面内容区域比较长时比如瀑布流的使用，用户需要频繁返回顶部查看相关内容时，可以滚动后出现回到顶部控件。
花瓣PC端页面滚动后，右下角有一些功能操作，滚动后出现回到顶部控件。
当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时，可以使用回到顶端返回页面顶部。
如果当前页面是主页，可以滚动后主页按钮便成回到顶部按钮，这样可以避免遮挡内容，优化阅读体验。
京东购物车页面除了展示添加到购物车的商品外，底部还有推荐上面，滚动后出现回到顶部控件；每日优鲜APP页面滚动后，导航的主页按钮变成回到顶部按钮，优化体验，类似的还有淘宝、饿了么、考拉等主页有瀑布流的内容。
当PC端有多条组合内容时，可以左侧做一个锚点定位配合滚动条快速定位到页面需要查看的内容。
当PC端使用上下布局时，且内容区域居中固定时，锚点悬浮在左侧显示，当屏幕小于一定尺寸时，锚点缩小悬浮于页面左侧，鼠标移入时再显示。
在优设的网址导航中，由于导航分为多个类型，所以将具体类型名称放到左侧展示，能快速定位到需要的内容。
当PC端左侧有导航，锚点定位可以放到右侧，常用于阅读文章等场景。
在Ant design的组件页，由于左侧有二级导航，所以将页面的锚点定位放在右侧，类似的还有语雀文章阅读。
当有时间类型的内容比如浏览照片时，可以采取时间轴定位的方式快速滑动到需要查看的内容。
内容过多的情况下也可以采取分页的形式，滚动后将分页及回到顶部固定在底部右下角位置。
例如宝宝树APP采用时间轴的方式快速定位，默认状态定位控件缩小固定在右侧，滑动时控件变大显示具体时间，方便用户按时间快速查找照片，类似的还有百度网盘里的照片浏览。
豆瓣APP在电影的讨论模块，选择一个讨论查看详情滚动后底部显示回复的定位锚点，控件放在操作栏上面吸底展示。
作者： Cassie
原文链接：www.zcool.com.cn/article/ZMTM0ODkzMg==.html
本文由 @ Cassie 授权发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
*请认真填写需求信息，我们会在24小时内与您取得联系。
