微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

这篇具有很好参考价值的文章主要介绍了微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述

今天第一次接触vant组件库。
ant官网地址适用于Vue3
支持Vue2Vue3微信小程序等

我在使用van-tabs组件时遇到了一个问题,如下图所示:

从图片上可以看到有个灰色的横向滚动条,一开始领导给我说这个问题,我反反复复都没有测出来,在微信开发者工具、IOS系统都没有这个问题,但是小程序发布后,在安卓手机上复现了这个问题。

一开始我是昏头雾水,经过百度搜索,找到了解决方案,下面分享给大家:

微信小程序去除滚动条,Vue ,微信小程序,微信小程序,小程序,vue.js,javascript

解决方案

你在哪个页面上使用的van-tabs组件,就在那个页面的<style></style>标签里加上下面这段css样式,保存重新编译一下,看下能否解决你所遇到的问题。文章来源地址https://www.toymoban.com/news/detail-688147.html

/**去除滚动条样式 */
  /deep/ ::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
    color:transparent;
  }

到了这里,关于微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vant van-tabs van-pull-refresh van-list 标签栏+上拉加载+下拉刷新

      增加分页:

    2024年02月13日
    浏览(46)
  • 微信小程序文本横向无缝滚动

    背景: 微信小程序中列表宽度不够长,其中某字段显示不完整,因此要使其自动滚动。 (最初看网上很多用定时器实现,但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表,如果设置定时器性能耗费太大,因此只用css实现) 样

    2024年02月06日
    浏览(75)
  • 微信小程序卡片横向滚动竖图

     进入下面小程序可以体验效果 :   滚动并不是使用swiper,该方式使用的是scroll-view实现 Swiper局限性太多了,对竖图并不合适 从左往右滚动图片示例 wxml代码:  js代码:  wxss代码:

    2024年02月12日
    浏览(62)
  • 微信小程序横向滚动卡片列表模板

    在开发微信小程序时,横向可滚动卡片列表是一个必不可缺的页面组件。其不仅美观还可以节省屏幕空间。具体截图如下: 主要用的是scroll-x,具体代码如下: wxml 附:renshu.png wxss js 在微信小程序开发中,横向滚动卡片列表是提升用户体验和界面美观的重要组件。本文介绍了

    2024年02月16日
    浏览(46)
  • 微信小程序去除默认滚动条展示

    一、微信小程序改版框架升级后,滚动条默认展示了。 在实际应用中效果不好,如果想默认隐藏掉,代码段如下: 设置成全局样式,展示即可。 更多:

    2024年02月03日
    浏览(39)
  • uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题

    1.1 template 1.2 style(scss) 1.3 问题截图 2.1 解决办法 在 u-scroll-list 内部只放一个盒子,盒子内部包裹横向滚动列表项,并且盒子设置 display:flex; 2.2 template 2.3 style(scss) 2.4 解决截图

    2024年02月11日
    浏览(52)
  • 微信小程序--开发横向滚动条scroll-view

    一、话不多说,上代码 .wxml文件写法 css样式 js写法 二、解析  scroll-x=\\\"true\\\":表明是横向滚动 class=\\\"{{currentTab==index?\\\'scroll_item\\\':\\\'\\\'}}\\\":当点击时才会变色,其中currentTab的初始值是0,通过点击事件更改值

    2024年02月12日
    浏览(61)
  • uniapp-微信小程序实现swiper左右滚动切换tab,上下滚动加载列表

    思路:左右滑动使用swiper,上下滑动用scroll-view,swiper改变时同时改变tab并更新列表 坑点: 1. swiper高度问题,导致滑动不到最底部和最顶部         需要手动计算,减去顶部高度和底部tabbar,并且需要同时设置padding-top和paddin-botton,否则列表显示不完整 2. 由于最开始的代码

    2024年02月04日
    浏览(64)
  • 微信小程序原生实现无边框table组件支持横向和纵向滚动

    效果图(支持单元格样式自定义) table组件代码 wxml文件 wxss文件 js文件 组件使用 1、在page页面的json文件中引入组件(默认大家都会引入); 2、在page页面的wxml文件中使用组件 3、在page页面的js文件中设置数据 4、在page页面的wxss文件中修改样式

    2024年02月07日
    浏览(67)
  • uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点(点击tab跳转对应的元素位置)

    html代码部分 重点是给元素加入【 :id=“‘item’ + item.id”】 2.JS代码部分

    2024年02月21日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包