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>