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

原文地址：https://blog.csdn.net/qq_53024519/article/details/142764881

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！