uniapp顶部提示栏实现

qq_530245192024-10-12 20:38

效果：

用途：用于展示较短系统通知

实现逻辑：

1.通过请求获取该显示的通知内容，目前所考虑的字段有：

复制代码

{
    id: 200,     // 通知标识，后续会用其阻止用户关闭后无休止开启
    message: "请勿以系统规定的其它方式获取相关道具，一旦发现，将给予封号处罚！", 
    force: false,     // 是否强制，true--不可关闭，false--可关闭
    open: true        // 用于管理通知的开关，最多只有一条消息处于开启状态，后台只返回开启的通知
}

2.通过占位与fixed使显示内容位置固定

html 复制代码

<view style="height: 30px;" v-if="!isClose">
		<view class="p-tb-5" style="white-space: nowrap; overflow: hidden; width: 90%; font-size: 12px; background-color: beige; position: fixed; z-index: 20;">
			<view style="display: flex;">
				<view class="scroll-text"  style="width: 90%;">
					{{notice.message}}
				</view>
				<view @click="toCloseNotice" v-if="!notice.force" style="z-index: 10; width: 10%; background-color: beige;" class="center-hor">
					<image src="../../static/icon/error.png" class="iconImage-20"></image>
				</view>
			</view>
		</view>
	</view>

并给予文字显示滚动效果

css 复制代码

.scroll-text {
	  display: inline-block;
	  will-change: transform; /* 提高性能 */
	  animation: scroll-left 10s linear infinite; /* 动画效果 */
	}
	
	/* 定义动画 */
	@keyframes scroll-left {
	  from {
	    transform: translateX(100%);
	  }
	  to {
	    transform: translateX(-100%);
	  }
	}

3.设置显示效果与关闭

javascript 复制代码

export default {
		name:"topNotice",
		data() {
			return {
				notice: commonApi.getNotice(),
				isClose: false
			};
		},
		methods: {
			isClosed() {
				const ids = uni.getStorageSync("closedids")
				if(ids && ids === this.notice.id) {
					return true
					// return ids.includes(this.notice.id)
				}
				return false
			},
			
			toCloseNotice() {
				// const ids = uni.getStorageSync("closedids") || []
				// ids.push(this.notice.id)
				uni.setStorageSync("closedids", this.notice.id)
				this.isClose = this.isClosed()
			}
		},
		mounted() {
			this.isClose = this.isClosed()
		}
	}