欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-02 11:30:34
...

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

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

类似于以下的界面:
uniapp 电商app 几个小功能的实现
uniapp 电商app 几个小功能的实现
此时就需要用到一个函数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实现
uniapp 电商app 几个小功能的实现

//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>