uniapp uview头顶_uview 置顶-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60608114/article/details/127921837

本文深入探讨了在uniApp中使用uView UI框架时，如何处理和定制头部（header）的样式。通过调整CSS3属性，如定位、透明度和过渡效果，实现动态交互。同时，讲解了JavaScript在头部操作中的应用，例如监听滚动事件来实现头部的固定和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//uniapp横向卡片
<template>
<view class="scroll_box"> 
    <scroll-view scroll-x>
 
      <view class="item_list" >
        1
      </view>
      <view class="item_list" >
        2
      </view>
      <view class="item_list" >
        3
      </view>
      <view class="item_list" >
        4
      </view>
      <view class="item_list" >
        5
      </view>
      <view class="item_list" >
        6
      </view>
     
    </scroll-view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				scList: [{
					title: "每日抽奖",
					content: "每天10点抢大奖",
					background: "#ffede6",
					text_color1: "#ff7341",
					text_color2: "#ff9c7e",
				}, {
					title: "疯狂领劵",
					content: "每天定时疯抢",
					background: "#fdf4d5",
					text_color1: "#c58268",
					text_color2: "#d5a08e",

				}, {
					title: "五折优惠",
					content: "大奖不断发送",
					background: "#e9f2dd",
					text_color1: "#84a379",
					text_color2: "#a6be9d",
				},{
					title: "五折优惠",
					content: "大奖不断发送",
					background: "#e9f2dd",
					text_color1: "#84a379",
					text_color2: "#a6be9d",
				},{
					title: "五折优惠",
					content: "大奖不断发送",
					background: "#e9f2dd",
					text_color1: "#84a379",
					text_color2: "#a6be9d",
				},],
				title: '每日抽奖',

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.scroll_box{
	width: 100%;
	height: 307rpx;
	overflow: hidden;
	padding: 20rpx;
	background: #fff;
	white-space: nowrap;
	border: 1px solid red;
	}
	.scroll_box scroll-view{
	  height: 100%;
	  width: auto;
	  overflow:hidden;
	}
	.item_list{
	width: 160rpx;
	height: 100%;
	margin-right: 23rpx;
	display: inline-block;
	margin-left: 10px;
	background-color: blue;
	 
	}
</style>

//uniappuview 吸顶加横向卡片
<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view style="height: 300rpx;background-color: #FE3931;">
				2222
				<view class="scroll_box">
				    <scroll-view scroll-x>
				 
				      <view class="item_list" >
				        1
				      </view>
				      <view class="item_list" >
				        2
				      </view>
				      <view class="item_list" >
				        3
				      </view>
				      <view class="