You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
102 lines
2.6 KiB
<template>
|
|
<view class="u-page">
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">基础功能</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text1"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">可关闭</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text5"
|
|
mode="closable"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义横向滚动速度</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text2"
|
|
speed="250"
|
|
mode="closable"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">可跳转(点击右箭头)</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text3"
|
|
mode="link"
|
|
url="/pages/componentsB/tag/tag"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">横向步进滚动</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text4"
|
|
:step="true"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">纵向滚动</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text4"
|
|
direction="column"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义样式</text>
|
|
<view class="u-demo-block__content">
|
|
<u-notice-bar
|
|
:text="text1"
|
|
color="#ffffff"
|
|
bgColor="#f56c6c"
|
|
></u-notice-bar>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
|
|
text2: 'uView UI众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨',
|
|
text3: 'uView UI收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍',
|
|
text4: [
|
|
'寒雨连江夜入吴',
|
|
'平明送客楚山孤',
|
|
'洛阳亲友如相问',
|
|
'一片冰心在玉壶'
|
|
],
|
|
text5: '涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川'
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
click() {
|
|
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-demo-block__content {
|
|
@include flex(column);
|
|
}
|
|
</style>
|
|
|