<template>
<view class="page-demo">
<scroll-view class="scrool-more" scroll-x="true" scroll-with-animation="true">
<text class="label-name" v-for="(item,index) in listTypecont" :key="index">
{{item.name }}
</text>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
listTypecont:[
{name:"司藤"},
{name:"三生三世十里桃花"},
{name:"宸汐缘"},
{name:"半妖司藤"},
{name:"百岁之约,一言为定"},
{name:"全部全部"},
] };
},
}
</script>

<style>
/* 去除scroll-view产生的横向滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.scrool-more{
/* white-space: nowrap; 表示的不换行*/
white-space: nowrap;
/* 宽度100%必须给 */
width: 100%;
height: 100rpx;
vertical-align: middle;
line-height: 100rpx;
background: pink;
}
.label-name{
width: 140rpx;
color: #fff;
}
</style>

去除横向滚动条和纵向滚动条的区别

去除横向滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
去除纵向滚动条
.page-demo{
/* 去除滚动条*/
height: 100vh;
overflow-y: auto;
}
/* 去除滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}

我们可以发现滑动的时候,横向滚动条已经消失了。

去除小程序scroll-view产生的横向滚动条的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

  3. 如何去除小程序button的边框

    小程序button 自带样式,就算用 border:none: background:none ,还是会有一条细的边框 使用:after选择器就可以去除 button::after{ border:n ...

  4. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  5. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  6. 小程序获取view元素的高度

    页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> < ...

  7. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  8. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  10. 微信小程序~基础组件

    (1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视 ...

随机推荐

  1. 关于elementUI的table报错RangeErr Maximum call stack size exceeded

    项目中需要做一个功能,在表格中如果存在二级列表,点击箭头之后请求后台接口,展开显示二级列表的内容.点击箭头拿到了数据,但是后台会报错如下图,且数据展示不出来 上网查了下,意思是堆栈溢出,这个提示让我十 ...

  2. 使用 spring stream 发送消息

    为什么使用spring stream ? spring stream 是用来做消息队列发送消息使用的.他隔离了各种消息队列的区别,使用统一的编程模型来发送消息. 目前支持: rabbitmq kafk ...

  3. uniapp 消息推送

    1.前言 作为一个非原生App的开发者,对于手机系统的推送机制了解是是非有限的,只有了解清楚这些机制,后期的开发才会少踩很多坑,本文将对推送机制逻辑进行一个简单的梳理与记录 2.推送流程 推送流程1. ...

  4. uni-app下载文件在ios下失败

    标签: js uni-app 前情 uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app. ...

  5. COS数据工作流+云函数最佳实践 - 文件哈希值计算

    01 文件哈希值是什么? 文件哈希值,即文件内容的HASH值.是通过对文件内容进行加密运算得到的一组二进制值,主要用途是用于文件校验或签名.正是因为这样的特点,它常常用来判断两个文件是否相同. COS ...

  6. [WPF UI] 为 AvalonDock 制作一套 Fluent UI 主题

    AvalonDock 是我这些天在为自己项目做技术选型时发现的一个很好的开源项目,它是一个用于 WPF 的布局控件库,可以帮助我们实现类似 Visual Studio 的布局效果.因为它自带的一些样式 ...

  7. Kubernetes 可能是分布式架构的大结局了

    前两年在爬虫里折腾的太久了,最近快马加鞭追赶分布式架构潮流. SpringCloud.Dubbo.ServiceComb 刷完,以为分布式架构就是这样了.这批架构可能也就 Java 栈的人会感觉它们特 ...

  8. 2024年1月Java项目开发指南14:关于post中的body和param以及java中的@RequestBody和@RequestParam

    在HTTP请求中,POST方法通常用于向服务器发送数据,这些数据可以在请求的body中,也可以在URL的param中.不过,这两者的使用方式和适用场景是不同的. Body:在POST请求中,body主 ...

  9. Netty 那些事儿 ——— 关于 “Netty 发送大数据包时 触发写空闲超时” 的一些思考

    作者:tomas家的小拨浪鼓链接:https://www.jianshu.com/p/8fe70d313d78来源:简书 本文是笔者和朋友(笔名:oojeek)一起讨论该问题的一个记录.文章以讨论过程 ...

  10. 开源架构Fabric、FISCO BCOS(以下简称“BCOS”)、CITA 技术对比

    转自 https://www.coingogo.com/news/41300 联盟链技术哪家强?开源架构Fabric.FISCO BCOS(以下简称"BCOS").CITA 技术对 ...