一个菜鸟的互联网技术分享博客
您的位置： 主页 > 使用vue全家桶高仿小米商城--组件吸顶实现（原生）
advertisement

使用vue全家桶高仿小米商城--组件吸顶实现（原生）

作者：listener_zhang | 时间：2020-01-31 01:04 | 访问数： |

1、ProductParams.vue代码如下：
  1. <template>  
  2.     <div class="nav-bar" :class="{ 'isFixed':isFixed }">  
  3.         <div class="container">  
  4.             <div class="pro-title">  
  5.                 小米8  
  6.             </div>  
  7.             <div class="pro-param">  
  8.                 <a href="##">概述</a><span>|</span>  
  9.                 <a href="##">参数</a><span>|</span>  
  10.                 <a href="##">用户评价</a>  
  11.                 <slot name="buy">立即购买</slot>  
  12.             </div>  
  13.         </div>  
  14.     </div>  
  15. </template>  
  16.   
  17. <script>  
  18.     export default{  
  19.         name:'nav-bar',  
  20.         data(){  
  21.             return{  
  22.                 isFixed:false  
  23.             }  
  24.         },  
  25.         mounted() {  
  26.             window.addEventListener('scroll',this.initHeight)  
  27.         },  
  28.         methods:{  
  29.             initHeight(){  
  30.                 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //获取滚动的高度     
  31.                 this.isFixed = scrollTop > 152 ? true : false  
  32.             }  
  33.         },  
  34.         destroyed() {  
  35.             window.removeEventListener('scroll',this.initHeight,false)  
  36.         }  
  37.     }  
  38. </script>  
  39.   
  40. <style lang="scss">  
  41.     @import '../assets/scss/mixin.scss';  
  42.     @import '../assets/scss/config.scss';  
  43.     .nav-bar{  
  44.         height: 70px;  
  45.         line-height: 70px;  
  46.         border-top: 1px solid $colorH;  
  47.         background: $colorG;  
  48.         &.isFixed{  
  49.             position: fixed;  
  50.             top:0;  
  51.             width: 100%;  
  52.             box-shadow: 0 5px 5px $colorE;  
  53.         }  
  54.         .container{  
  55.             @include flex();  
  56.             .pro-title{  
  57.                 font-size: $fontH;  
  58.                 color: $colorB;  
  59.                 font-weight: 700;  
  60.             }  
  61.             .pro-param{  
  62.                 font-size: $fontJ;  
  63.                 span{  
  64.                     margin: 0 10px;  
  65.                 }  
  66.                 a{  
  67.                     color: $colorC;  
  68.                 }  
  69.                   
  70.             }  
  71.         }  
  72.           
  73.     }  
  74. </style>  
2、product.vue代码如下：
  1. <template>  
  2.     <div class="product">  
  3.         <product-params>  
  4.             <template v-slot:buy>  
  5.                 <button class="btn">立即购买</button>  
  6.             </template>  
  7.         </product-params>  
  8.         <div class="h">123</div>  
  9.     </div>  
  10. </template>  
  11.   
  12. <script>  
  13.     import ProductParams from '../components/ProductParams';  
  14.     export default{  
  15.         name:'product',  
  16.         components:{  
  17.             ProductParams  
  18.         }  
  19.     }  
  20. </script>  
  21.   
  22. <style lang="scss">  
  23.     .product{  
  24.         button{  
  25.             margin-left: 10px;  
  26.         }  
  27.         .h{  
  28.             height: 2000px;  
  29.             background: red;  
  30.         }  
  31.     }  
  32. </style>  
3、效果对比图如下：



标签： vue vue全家桶 js

zhangren.online
上一篇：使用vue全家桶高仿小米商城--产品站参数组件实现
下一篇：使用vue全家桶高仿小米商城--产品站交互实现

您可能喜欢

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

2019年04月11日 查看： 125

​使用vue全家桶高仿小米商城--前端主要的

​使用vue全家桶高仿小米商城--前端主要的

2020年01月29日 查看： 158

​使用vue全家桶高仿小米商城--订单列表

​使用vue全家桶高仿小米商城--订单列表

2020年02月09日 查看： 152

​使用vue全家桶高仿小米商城--首页轮播

​使用vue全家桶高仿小米商城--首页轮播

2020年01月29日 查看： 150

​使用vue全家桶高仿小米商城--订单父组件

​使用vue全家桶高仿小米商城--订单父组件

2020年02月06日 查看： 222

​安装Vue-cli爬坑

​安装Vue-cli爬坑

2019年03月21日 查看： 154

备案号：赣ICP备19013339号
回到顶部