记录vant里面notice-bar使用v-show文字消失问题

最新推荐文章于 2024-05-15 22:50:31 发布
最新推荐文章于 2024-05-15 22:50:31 发布
阅读量716 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47190975/article/details/126736671
版权

今天在使用vant的notice-bar时候,需要使用v-show去控制显示和隐藏,但是隐藏重新打开之后文字直接就没了。

我刚开始还以为是自己的问题,后面查看百度之后发现别人也会有这个原因,使用了别人的做法好像也无济于事(可能是我使用的方式不对)。

所以自己花了点时间研究了一下，解决办法：

使用watch去监听控制显示和隐藏的变量,当true的时候重新给text赋值,当false的时候把text的值赋值为空字符串.

 

 

卯足劲往前冲
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant tab组件解决文字过多显示不全的问题
孙少的博客
11-17 830
vant tab组件解决文字过多显示不全的问题
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实现NoticeBar 通知栏。走马灯公告栏
qq_50851509的博客
03-29 2369
公告通知栏父组件传notice数组，组件设置了timer可以多条进行轮播。
小程序vant tab组件解决文字过多显示不全的问题
宋小羽
04-15 4180
使用小程序时，某些分类名称可能会过长，导致tab组件显示就会出现下图显示不全的问题。 方法步骤 1. 增加tab-class标签样式类 <!--增加tab-class定义--> <van-tabs tab-class="tab-class" sticky class="nav" active="{{ active }}" bind:change="onCateChange"> <van-tab wx:for="{{cate_list}}" wx:key="index".
vant tab组件动态改变van-tab title后显示不全问题，需要手动滑动
我总是词不达意的博客
05-24 5823
vant tab组件
uniapp-插件NoticeBar 通告栏滚动显示不出来
陈小白
04-09 6978
我们通过uniapp的插件市场引入NoticeBar 引入之后 滚动之后发现文字不见了，通过检查代码样式发现，当它滚动的时候，内容的高度为0，既然知道了原因，那就解决了 在components找到源码文件 找到样式表，找到uni-noticebar__content--scrollable这个类名，在大约318行的位置中加上 height:100% 文字就...
vant -- noticebar不滚动、text文字消失
kyleOPM的博客
12-04 4000
vant noticebar组件问题场景：解决方法：组件：data:init函数:watch: 问题场景： 使用v-show切换，或者popup气泡组件切换，导致noticebar停止滚动，text文字消失。 解决方法： 使用watch监听切换动态，对text重新赋值“XXX”。 组件： <van-notice-bar :color="noticebarOption.color" :background="noticebarOption.background"
NoticeBar 通告栏文字不滚动显示
LzzMandy的博客
07-14 5118
原因1：组件的animationDuration属性值为'0s'导致 解决：重新initSize即可 1、布局 <block v-if="laba.remark"> <uni-notice-bar color="#F85550" ref="notice" :text="laba.remark" showClose="true" single="true" scrollable="true
vant3 解决picker组件经常按钮消失或内容消失的情况
youzigrowing的博客
01-13 1037
vant3 解决picker组件经常按钮消失或内容消失的情况
vant弹窗放在子组件显示 不上下居中问题
qq_38935512的博客
11-18 1135
问题分析 ：放在子组件中fixed 混乱，查窗口高端，定位尽然时根据父组件的高度去定位的。 解决方案： 1.将弹出窗口放在父组件中 以插槽slot的方式引入
vant 自定义 van-dropdown-item的用法
10-15
主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vant-mall-tpl:vant-ui商城模板
05-15
先锋商城 项目设置 npm install 编译和热重装以进行开发 npm start 编译并最小化生产 npm run build:prod
移动端 vant框架 判断v-show=“” v-if=““
weixin_44727080的博客
10-28 2077
<div class="weui-col-20 headerCol text-right" v-show="xianshi" @click="anonymous">匿名</div> <div class="weui-col-20 headerCol text-right" v-show="!xianshi" @click="cancelAnonymous">企业认证</div> 这是两个页面 ，一个匿名，一个企业认证页面上通过这里切换 企业验证的...
js基础【偶数倍背景相同颜色】
姗姗的博客
07-08 338
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
vue展示与隐藏侧边栏功能
qq_41742961的博客
03-29 3395
<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#3C4A78" :active-text-color="isCollapse ? '#fff' : '#3C4A78'" text-color="#F6F8FF" unique-opened :collapse="isCollapse" .
微信小程序样式组件Vant——物流消息通知
qq_43706131的博客
08-01 1089
微信小程序样式
使用Vant插件的NoticeBar组件，在浏览器中正常，但在ios上只滚动一次
weixin_49417749的博客
04-01 1576
场景：在浏览器和安卓中正常，但在ios上只滚动一次； 解决： 更新Vant包； 更新无法解决就是scrollable这个属性的问题，直接设置为true <van-notice-bar left-icon="volume-o" color="#343434" background="#fff" :text="" :scrollable="true"/> ...
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1089
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vant van-notice-bar 垂直滚动实现多行滚动
06-02
vant van-notice-bar组件默认只能实现单行文本的水平滚动，如果要实现多行文本的垂直滚动，可以进行如下操作： 1. 在van-notice-bar组件的外层包裹一个div，并设置该div的高度和样式。 2. 将van-notice-bar组件的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值