uniapp 电商app 几个小功能的实现

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

有一些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就是一个对象，对象属性名称为scrollTop
			this.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>