uniapp中的滚动通知u-notice-bar（Uview)自定义图标

最新推荐文章于 2024-09-13 18:13:21 发布
最新推荐文章于 2024-09-13 18:13:21 发布
阅读量2.1k 收藏 1
点赞数 5
分类专栏： uView图标自定义 滚动通知 u-notice-bar 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45873204/article/details/139656626
版权

废话不多说，直接来吧，更改Uview中的notice-bar的小喇叭图标；

首先分两种情况

一、：要更改的图标在uview的icon库中有的，那就直接改icon的图标名就行；这个图标名必须要在Uview中的icon中有，比如我现在把不喇叭改为手机图标，那就直接 icon="phone"

二、把小喇叭图标改为自己的本地图标，那就直接 把icon引入本地图片就行，但必须得用require引入；例： 动态绑定 :icon="require('../../static/lastNotice.png')"

如果引入的图片大小不符，那就直接改样式就行，必须得deep 且!important

uniapp - uview 组件库中 NoticeBar 滚动通知组件，设置为不滚动的 “静止“ 文字状态显示（禁止文字滚动让其静止，禁用翻滚轮播变为静止不动的状态显示）完美解决最新教程，全端兼容
王二红
12-21 4912
uniappuview组件库中NoticeBar滚动通知组件，uniappuview组件库如何将NoticeBar滚动通知设置为静止不动的状态显示，uniappuview如何将滚动通知组件的文字停止滚动，怎么把uviewNoticeBar滚动通知组件的文字滚动效果禁用禁止掉，uview将NoticeBar滚动通知组件的文字滚动效果禁用，uniappuview将滚动通知组件改为不滚动的效果，让文字不动，uniappuviewNoticeBar滚动通知组件怎么让文字不滚动，u
uni-app uView 滚动公告
weixin_71344385的博客
06-19 1382
uni-app uView 滚动公告
uView的u-notice-bar组件横向滚动不生效问题解决
陈万洲的专栏
08-16 860
此问题导致我换了vant组件的 notice-bar，一度以为是该组件存在bug。uniapp中有vant组件 打包小程序又是一个问题，也是不得不回来继续折腾 uView的u-notice-bar组件，偶然发现是这个动画播放状态是暂停的，猜测可能是全局样式默认暂停了，那我么主动单独给个开的样式吧。我是在 /src/uni.scss 全局设置的，你可以自己决定在哪里去设置。uView的u-notice-bar组件横向滚动不生效问题解决。针对这个问题记录下来，希望帮到踩坑的朋友。
uniapp组件-uni-notice-bar通告栏
热门推荐
03-01 1万+
官方示例：https://ext.dcloud.net.cn/plugin?id=30 通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。 基本用法： <template> <view> <uni-notice-bar :single="true" text="[单行] uni-app 1.6发布，开发一次、7端覆盖！" /> <uni-notice-bar text="[多行] uni-app 1.6版正式发布，开发.
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
精通前端技术，了解后端接口
01-17 4698
该组件用于滚动通告场景，有多种模式可供选择。
uni-app 之 NoticeBar 滚动通知，横向滚动，竖/纵向滚动
jun_tong的博客
09-15 3800
uni-app 之 NoticeBar 滚动通知，横向滚动，竖/纵向滚动
uView——u-notice-bar 滚动通知 (文字向上滚动，通知栏效果)
qq_43201350的博客
03-01 1515
uView——u-notice-bar 滚动通知 (文字向上滚动，通知栏效果)
用uniapp写一个程序，滚动显示“你好”的字样
最新发布
03-17
"u-notice-bar": "/uview-ui/components/u-notice-bar/u-notice-bar" } } ``` 3. 模板中使用： ```html <u-notice-bar :text="'你好'" :volume-icon="false" bg-color="#fffbe8" color="#ed6a0c" :speed...
uView 2.0使用自定义iconfont图标
baidu_37302589的博客
05-16 5228
view2.0暂不支持使用自定义图标，只能通过修改源码去实现 实现后的效果如下 1、先去图标库选择想要的icon加入项目，再生成代码 2、再点击下载代码，解压后如下 3、编写test.js文件，并通过 node test.js 执行 let path1 = "./iconfont.json"; let fs = require('fs'); const path = require('path'); let plays = JSON.parse(fs.readFileSync(path1)); co
uView自定义图标和普通引入图标（iconfont-阿里巴巴图标库）
章小鱼的博客
10-10 4230
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架。
uview2.0 如何自定义图标
weixin_44179923的博客
12-12 3353
首先去iconfont这个网站添加自己想要的图标，然后下载下来 把ttf文件放到根目录 static/iconfont.ttf 把css放到根目录的common/iconfont.css 打开App.vue 文件 修改成下面 <script> export default { onLaunch: function() { // #ifndef MP const domModule = weex.requireModule('dom') domModule.add.
uniapp实现不同样式的通告栏
m0_69665878的博客
09-13 1485
使用uni-notice-bar组件可以提高用户对重要通知的关注度，并且通过滚动效果可以引起用户的注意。4、支持自定义图标：可以通过设置组件的属性来自定义通知栏的图标，可以使用内置的图标库，也可以使用自定义的图标。2、支持滚动效果：当通知内容超出组件的宽度时，组件会自动启用滚动效果，让用户可以看到完整的通知内容。3、支持点击事件：可以为通知栏组件绑定点击事件，当用户点击通知栏时，可以触发相应的操作或界面跳转。1、可自定义样式：可以通过设置组件的属性来自定义通知栏的样式，包括背景色、文字颜色、图标等。
使用uview框架的icon组件之扩展自定义图标库
weixin_44168109的博客
01-26 6438
uView已经有很多图标，但也没办法满足我们所有的需求。此时，我们就需要自己扩展图标库。 icon组件之扩展自定义图标库选择以及下载图标项目配置以及使用 选择以及下载图标 1、首先可以选择自己喜欢的图标库，这里以阿里图标库为例。 2、接着选择自己的想要的图标并且加入购物车。 3、然后打开购物车把图标添加到项目中。 4、点击更多操作，选择编辑项目。 5、然后按照图片相应的填写好。 项目配置以及使用 ...
vue 自定义 notice 组件、多notice 展示样式、自定义渲染内容
lpsqd2018的博客
12-17 1317
notice.vue <!-- Notice.vue --> <template> <div class='noticeSelf' v-if="isShow"> <!-- <div class='noticeSelf'> --> <div @click='hide'> 删除</div> <div>{{title}}</div> <div>{{me
微信小程序左右滚动公告栏效果
09-12 1861
<view class='notice-wrap' hidden='{{hideNotice}}'> 　　<view class='tongzhitext'> 　　　　<text class="tongzhi-text">{{notice}}</text> 　　</view> 　　<view bindtap...
自定义微信小程序组件 滚动提示栏
Carina的编程技术博客
07-18 2263
微信小程序组件 滚动提示栏 效果如下 wxml <view wx:if="{{ show }}" class="i-class i-noticebar" style="color: {{ color }}; background-color: {{ backgroundcolor }}"> <i-icon wx:if="{{ icon }}" type="{...
Vue自定义滚动条样式
qq_44977477的博客
12-13 387
滚动条 overflow: auto; 滚动条： 修改： .uc-table { width: 90%; height: 70%; overflow: auto; margin: auto; } .uc-table::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺...
vue项目自定义左边菜单栏图标icon
donghua201的博客
09-28 1278
通过iconfont来转化成代码，添加类使用。
uview 组件u-notice-bar 停止左右滚动
11-02
UView UI库中的`u-notice-bar`组件是一个通知提示条，通常用于显示信息或者状态。如果想要停止这个组件的左右滚动效果，你需要找到控制滚动的相关属性或者API。UView并没有直接提供关闭滚动的功能，但它可能会提供类似`scrollable`、`swipeable`等属性来控制滚动。 如果你能找到`swipeable`属性，并将其设置为`false`或者`disable`，那么滚动应该会被禁止。然而，具体的实现可能因版本不同而有所差异，建议查阅UView的官方文档或者查看其源码获取准确的信息。 如果找不到合适的属性，你可以尝试通过自定义样式或JavaScript来阻止滚动，比如添加CSS样式： ```css .u-notice-bar { overflow-x: hidden; /* 阻止水平滚动 */ } ``` 或者在JS中手动监听并阻止事件： ```javascript const noticeBar = document.querySelector('.u-notice-bar'); noticeBar.addEventListener('touchmove', function(e) { e.preventDefault(); }); ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值