<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="滚动条">
<!-- 1. 基础通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础通知栏" />
<zk-notice-bar content="这是一条基础通知消息" :zkStyle="baseStyle" />
</zk-theme>
<!-- 2. 带图标通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带图标通知栏" />
<zk-notice-bar content="这是一条带图标的通知消息" icon="volume-up-line" :zkStyle="iconStyle" />
</zk-theme>
<!-- 3. 可关闭通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="可关闭通知栏" />
<zk-notice-bar content="这是一条可以关闭的通知消息" type="close" :zkStyle="closeStyle" @close="onClose" />
</zk-theme>
<!-- 4. 横向滚动通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="横向滚动通知栏" />
<zk-notice-bar content="这是一条很长的横向滚动通知消息，文字超出会自动滚动播放，这是一条很长的横向滚动通知消息" :scrollSpeed="100"
:zkStyle="scrollStyle" />
</zk-theme>
<!-- 5. 竖向滚动通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="竖向滚动通知栏" />
<zk-notice-bar scrollType="vertical" icon="volume-up-line" :content="verticalList" :interval="3000"
:zkStyle="verticalStyle" @click="onVerticalClick" />
</zk-theme>
<!-- 6. 步进模式通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="步进模式通知栏" />
<zk-notice-bar scrollType="vertical" icon="volume-up-line" :stepMode="true" :content="stepList"
:interval="2500" :zkStyle="stepStyle" @click="onStepClick" />
</zk-theme>
<!-- 7. 带链接通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带链接通知栏" />
<zk-notice-bar content="点击查看详情 >" url="/pages/detail/detail" :zkStyle="linkStyle" />
</zk-theme>
<!-- 8. 营销通知栏 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="营销通知栏" />
<zk-notice-bar scrollType="vertical" :content="promotionList" icon="volume-up-line"
:zkStyle="promotionStyle" />
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
verticalList: [
'新品上市，限时特惠活动',
'会员专享，折上再折优惠',
'限时秒杀，仅此一天机会'
],
stepList: [
'恭喜王**获得iPhone 15',
'恭喜李**获得小米手环',
'恭喜张**获得华为耳机'
],
promotionList: [
'双11狂欢节，全场5折起',
'新人专享，首单立减50元',
'限时秒杀，仅剩2小时'
],
baseStyle: {
background: '#f5f6f7',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
},
iconStyle: {
background: '#eaeffd',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
},
closeStyle: {
background: '#fff3e8',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
},
scrollStyle: {
background: '#ffffff',
padding: '24rpx 32rpx',
borderRadius: '12rpx',
borderWidth: '1rpx',
borderStyle: 'solid',
borderColor: '#eee'
},
verticalStyle: {
background: '#f8f9fa',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
},
stepStyle: {
background: '#ffffff',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
},
linkStyle: {
background: '#e8ffea',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
},
promotionStyle: {
background: '#fff3e8',
padding: '24rpx 32rpx',
borderRadius: '12rpx'
}
}
},
methods: {
onClose() {
uni.showToast({
title: '通知已关闭',
icon: 'none'
})
},
onVerticalClick(e) {
uni.showToast({
title: `点击了第${e.current + 1}条消息`,
icon: 'none'
})
},
onStepClick(e) {
uni.showToast({
title: `点击了第${e.current + 1}条消息`,
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
.demo-list {
.demo-item {
margin-bottom: 48rpx;
&:last-child {
margin-bottom: 0;
}
.demo-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 24rpx;
}
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container {
padding: 32rpx;
background-color: #ffffff;
}
.demo-item {
margin-bottom: 48rpx;
}
.demo-title {
font-size: 32rpx;
font-weight: 500;
color: #333333;
margin-bottom: 24rpx;
}
/* #endif */
</style>