uView的NoticeBar 滚动通知自带的bug之获取不到click的索引

最新推荐文章于 2024-03-01 06:32:52 发布
最新推荐文章于 2024-03-01 06:32:52 发布
阅读量1.3k 收藏 2
点赞数
文章标签： bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41593185/article/details/127121550
版权

官方说的点击通知滚动条可以拿到每一项的索引：

但是拿到的回调参数是默认的事件对象  e

实际业务需求：让通知栏竖向滚动，需要设置  direction="column"属性，点击每一项滚动项跳转到对应的详情页

因为是竖向滚动所以改动其u-column-notice的源码部分：

1. 首先找到本地的uView包下的 u-column-notice的文件 给swiper添加一个change事件

2. 在方法区在swiperChange事件中动态改变每次项目滚动的索引，然后把当前获取的索引传给click事件，这样在u-notice-bar的点击事件的回调参数中就可以拿到索引了

 我的u-notice-bar组件写法：

拿到索引做业务处理：

 

 最终视觉效果：自下到上滚动

 

 

 

KeepThinkig
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于uniapp开发的zblog多端小程序源码
03-03
基于uniapp开发的zblog多端小程序开源源码，反正据说利于收录，利于SEO，鹏仔一直使用的是zblog，所以就基于zblog进行开发。 使用uniapp打造多端小程序（主要针对 微信小程序、百度小程序、安卓APP） 安装介绍： 1、必须是已BA域名、zblog程序、并且伪静态。 2、zblog安装猫贝大佬的插件 https://app.zblogcn.com/?id=25453 然后自行配置文章id、分类id等（广告可以不用设置，还未开发）。 3、网站设置->启用API权限； 4、注册百度小程序、微信小程序、 QQ小程序之类（百度小程序必须为企业）； 操作教程: 1、下载HbuilderX、下载微信开发者工具、下载百度开发者工具； 2、下载本uniapp项目程序，使用HbuilderX打开项目 ； 3、打开文件manifest.json配置各版本小程序appid、还有应用名称、应用描述等； 4、修改 static->deployUrl.js 下的请求链接（就是换成你的网址）； 5、分别运行到 百度小程序和微信小程序开发工具，然后上传代码审核等； 6、等待审
uniapp中使用uview的NoticeBar滚动通知时，正常显示多维数组，并增加点击功能
最新发布
fzlw000的博客
03-16 758
给NoticeBar加上click，可以获得index，点击时，获取数组的index行数据的id即可。按照默认的组件，这样的结构是不能正常显示的。查看了组件的写法，发现只有修改组件，才能达到想要的形式。发现这里，text数组中直接调用的是item，按照我的数据结构改一下这里。但是我的数据结构是如下的形式，还想通过点击来跳转到文章的详情页面。再找到u-column-notice，如下。这样，在页面中就可以正常显示title了。item 改成 item.title。找到组件的位置，看到写法如下。
uniapp商城实战之uView UI框架前端极速开发
07-25
<p> <img src="https://img-blog.csdnimg.cn/c315e4094a894ba693a2d69c90db4032.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAb25lbmVzc3h5,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="实战商城app之uView框架前端极速开发课程" /> </p>
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版正式发布，开发.
uView——u-notice-bar 滚动通知 (文字向上滚动，通知栏效果)
qq_43201350的博客
03-01 635
uView——u-notice-bar 滚动通知 (文字向上滚动，通知栏效果)
uniapp - uview 组件库中 NoticeBar 滚动通知组件，设置为不滚动的 “静止“ 文字状态显示（禁止文字滚动让其静止，禁用翻滚轮播变为静止不动的状态显示）完美解决最新教程，全端兼容
王佳斌
12-21 4318
uniapp uview组件库中NoticeBar 滚动通知组件，uniapp uview 组件库如何将NoticeBar 滚动通知设置为静止不动的状态显示，uniapp uview 如何将滚动通知组件的文字停止滚动，怎么把uview NoticeBar 滚动通知组件的文字滚动效果禁用禁止掉，uview 将 NoticeBar 滚动通知组件的文字滚动效果禁用，uniapp uview 将滚动通知组件改为不滚动的效果，让文字不动，uniapp uview NoticeBar 滚动通知组件怎么让文字不滚动， u
uview左滑组件 group-swipe-action-item：修复bug，左滑删除当前行，下一项自动打开左滑删除场景
11-26
在IT行业中，UI设计和用户体验是至关重要的，而uView UI框架正是为了提供高效、便捷的前端开发体验而诞生的。uView是一个全面、强大的Vue.js UI组件库，广泛应用于移动H5、微信小程序、uni-app等平台。在这个特定的...
uview2.0uview2.0
04-22
uView2.0是一款在IT行业中广泛使用的前端UI框架，专为Vue.js设计，致力于提供一套简洁、易用且功能丰富的组件库，帮助开发者快速构建出美观的Web应用界面。uView2.0是对uView1.0的升级版本，带来了更多的特性、优化...
uniapp+uview框架模板
12-03
【uniapp+uview框架模板】是用于快速构建移动应用的开发工具，它结合了uniapp的跨平台能力与uview UI框架的丰富组件库，为开发者提供了高效、便捷的开发体验。uniapp是一个基于Vue.js开发的多端合一的框架，支持H5、...
uView1.0.zip
11-22
《uView1.0：构建高效Vue项目的利器》 在当今快速发展的前端开发领域，Vue.js作为一款轻量级、高性能的MVVM框架，已经深受开发者喜爱。而uView UI框架，作为Vue生态中的重要组件库，更是为开发者提供了丰富的UI组件...
uview内置类演示demo
02-06
UView内置类是其核心特性之一，它们为开发者提供了大量预定义的样式和行为，以提高开发效率和用户体验。 二、UView内置类的分类与应用 1. 布局类：如Flex布局、Grid网格布局，帮助开发者快速构建复杂的页面结构，...
【uniapp中的uview组件u-notice-bar的使用之踩坑】
m0_50029226的博客
08-12 5113
可以看到的是，动作’animation-duration‘为0s不走动，当我将这个参数取消就可以正常运作，但是我并没有进行动画配置，直接调用。这张图就可以看你出来，文字不会正常运行，后来根据不断的对比我发现是因为在组件上有一个。这个效果是正常的没有问题 ，一进入首页就回正常跑。，我没有配置的，还希望有了解的。......
uni-app 之 NoticeBar 滚动通知，横向滚动，竖/纵向滚动
jun_tong的博客
09-15 2316
uni-app 之 NoticeBar 滚动通知，横向滚动，竖/纵向滚动
uni-app uView 滚动公告
weixin_71344385的博客
06-19 1030
uni-app uView 滚动公告
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
精通前端技术，了解后端接口
01-17 2810
该组件用于滚动通告场景，有多种模式可供选择。
uni-app + uView学习笔记2
10-12 1425
uni-app + uView 学习笔记
uView-ui框架测试使用笔记
YZRHANYU的博客
10-17 1872
uView-ui框架测试使用笔记
uView 中 API 的 Props 使用
mygoes
06-06 1779
uView 中 API 的 Props 使用 哥们 , 你确定 Props 不会用 ? 哎 ~ 我以 uView 框架中的NoticeBar 滚动通知 来和你说说吧 ! 需求 : 在官方代码中添加 Props 中的 volumeIcon 属性 添加前代码 : <u-notice-bar mode="vertical" :list="list" type="none"></u-notice-bar> 添加后的代码为 : <u-notice-bar mode="vertical
uview获取不到相册
03-30
作为AI语言模型，我无法确定你具体指的是哪个应用或者平台的uview，但是一般来说，应用或平台获取不到相册可能有以下原因： 1. 没有授权相册访问权限：在应用或平台中，需要授权相册访问权限才能获取相册中的照片或视频。如果没有授权，应用或平台就无法访问相册。 2. 相册中没有照片或视频：如果相册中没有照片或视频，应用或平台就无法获取。 3. 应用或平台的bug：有时候应用或平台可能存在bug，导致无法获取相册中的照片或视频。 如果你遇到了这个问题，可以尝试重新安装应用或平台，查看是否授权相册访问权限，或者联系应用或平台的客服寻求帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值