uniapp顶部提示栏实现

效果:

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

实现逻辑:

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()
		}
	}
相关推荐
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918418 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手10 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_110 小时前
搭建商城系统
java·uni-app·php
合作小小程序员小小店13 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏14 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
CRMEB定制开发16 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
today喝咖啡了吗1 天前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战1 天前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术1 天前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递