uniapp顶部提示栏实现

效果：

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

实现逻辑：

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

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

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

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

并给予文字显示滚动效果

.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.设置显示效果与关闭

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()}}