<van-empty description=““ /> 滚动条bug

这篇具有很好参考价值的文章主要介绍了<van-empty description=““ /> 滚动条bug。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 <van-empty description="" /> 时,图片出现了个滚动条,图片可以上下滑动。

<van-empty description=““ /> 滚动条bug,微信小程序,van-empty,van-empty 滚动条

代码如下:

<block wx:if="{{courseList.length <= 0}}">
    <van-empty description="" />
</block>
<block wx:else>
...

尝试将 van-empty 外层包一层view,然后设置该view的css样式overflow: hidden 发现不起作用。

导致这个问题的主要原因应该是图片高度比其父视图高导致的。

打开Wxml调试查看视图层:

<van-empty description=““ /> 滚动条bug,微信小程序,van-empty,van-empty 滚动条

这里是一个图片,其父视图的class是 van-empty__image,图片的 class 是 van-empty__image__img

看了一下图片的父视图的 overflow 属性是 auto
<van-empty description=““ /> 滚动条bug,微信小程序,van-empty,van-empty 滚动条

这样的话,我们要么设置父视图的 overflow: hidden 可以解决这个bug。文章来源地址https://www.toymoban.com/news/detail-635815.html

.van-empty__image {
    overflow: hidden;
}

到了这里,关于<van-empty description=““ /> 滚动条bug的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用van-steps详解

    vant官网代码如下 问题1:官网代码用在小程序上无效果 这里发现小程序的vant包里有 steps 没有step 因此官网写法无效。 解决方法 正确写法如下所示 页面wxml js 最终效果 问题2:steps数组中如何设置其他字段 (1)找到vant的包 (2)找到steps的index.wxml文件 (3)下面红框里是ste

    2024年02月16日
    浏览(34)
  • 【微信小程序】van-uploader实现文件上传

    使用van-uploader和wx.uploadFile实现文件上传,后端使用ThinkPHP。 1、前端代码 json:引入van-uploader wxml:deletedFile是删除文件函数,设置deletable=“{{ true }}” 和在数据中 deletable: true图片右上角会显示删除按钮,在点击删除图标时调用deletedFile函数去处理删除逻辑。beforeRead:是读之前

    2024年02月14日
    浏览(49)
  • 微信小程序整合vantweapp van-field遇到的坑?

    最低基础库版本在 2.9.3 以上时,可以使用简易双向绑定。 但是在双向绑定的时候,发现有一个层级关系 在用户添加地址,和van-popup、van-area结合使用的时候,点击输入框,弹出选择地址的框,此时发现用户仍然可以输入,我就想到了禁用,但是发现禁用会置灰,给用户一种

    2024年02月11日
    浏览(72)
  • 使用van-dialog二次封装微信小程序模态框

    由于微信小程序的wx.showModal不支持富文本内容,无法实现更灵活的展示效果,故需要进行二次封装 实现思路:使用van-dialog以及微信小程序的rich-text实现 代码如下: 使用方法 本文仅提供一种思路,可能不是最优写法,欢迎大家讨论留言

    2024年02月07日
    浏览(46)
  • 微信小程序封装自定义van-dropdown-item 下拉选择框

    1.vant weapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容,限制了各位大神的操作,接下来我们先来了解他的使用在去封装自己的自定义 这是官方自己的效果! 下面来看看我们自己封装的组件 2.还能自定义搜索框等等是不是很奈斯! 接下来我们在

    2024年02月11日
    浏览(48)
  • 完美解决微信小程序使用复选框van-checkbox无法选中

    由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题   记得定义 checked 默认值   解决办法 : 添加onChange事件,给 checked 做赋值操作。 可以打印看看console.log(e) 选中效果: 取消选中效果:    

    2024年02月12日
    浏览(78)
  • 【微信小程序】canvasToTempFilePath:fail fail canvas is empty

    在微信小程序开发者工具会报错 canvasToTempFilePath:fail fail canvas is empty ,怎么解决呢 在微信小程序开发者工具会报错内容,如下图所示 最好是先看一下官方文档点此前往,上面写的,以前的是以前,现在的是有了变化 💡 可能是官网打算弃用 canvasId ,也就是说,只传这个的话

    2024年02月11日
    浏览(38)
  • 微信小程序——van-field中的left-icon属性自定义

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——

    2024年02月11日
    浏览(41)
  • 微信小程序中如何设置textarea或者van-field中的placeholder换行显示

    微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可  

    2024年02月12日
    浏览(43)
  • 完美解决微信小程序van-field left-icon自定义图片

    实现效果:   data中定义:

    2024年02月12日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包