昆山企业网站建设公司站内优化

顶部导航栏跟随页面滚动改变透明度功能实现

有一些app，顶部结构一般都是：顶部导航栏 banner图，展现的效果就是：顶部导航栏透明，当页面滚动距离超过一定值时（比如100），则顶部导航栏出现背景颜色。

类似于以下的界面：


此时就需要用到一个函数onPageScroll用于监听页面的滚动。

这种功能的实现形式如下：

<template><view :style="[{backgroundColor:'rgba(229, 77, 66,'+ headInfo.opacity +')'}]"></view>//此处的样式需要是动态绑定的，所以需要添加:,其次，修改背景颜色的透明度，则需要使用rgba()的形式，其中a就是透明度，范围在0到1之间
</template>
<script>export default{data(){return{headInfo:{"opacity":0}}},//监听页面滚动事件onPageScroll(obj){//此处的obj就是一个对象，对象属性名称为scrollTopthis.setPageScroll(obj.scrollTop)},methods:{setPageScroll(scrollTop) {//如果页面的滚动距离小于100，则顶部导航栏的背景透明度从0变化到1，如果滚动距离超过100，则透明度为1，即为实体颜色，没有透明度。if (scrollTop <= 100) {let num = scrollTop / 100;this.headInfo.opacity = num;} else if (scrollTop > 100) {this.headInfo.opacity = 1;}}}}
</script>

顶部横向滑动选项卡

顶部横向滑动选项卡，通过scroll-view实现

//scroll-x   代表是横向滑动，如果是竖向滑动，则应该是scroll-y  
//class="nav z"  代表类名是  nav z,这个是样式的实现
//scroll-with-animation  滑动选项卡时的动画
//scroll-left  点击选项卡时，滑动的距离
<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft"><template><block v-for="(item,index) in goodsCate" :key="index"><view class="cu-item" :class="index==headTab.TabCur?'select':''" @tap="tabSelect(item,index,$event)"><view>{{item.cateName}}</view><view class="tab-dot bg-white" /></view></block></template>
</scroll-view>