微信小程序 scroll-view 横向不滚动/隐藏滚动条

水深无声 2022-04-16 06:26 1065阅读 0赞

1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示；

2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的；

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；

4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap;

5.有时候为了美观要隐藏滚动条，需要在样式里加上

::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }

最后的代码如下：

<view class='scroll-box'>
      <scroll-view scroll-x class='index-nav-scroll'>
        <view wx:for="{
       {nvaIndex}}" id='{
       {index}}' class='index-nav-view'>{
       {item}}</view>
      </scroll-view>
    </view>

.scroll-box {
      position: fixed;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      border-top: 1px solid #d1d4d4; 
      border-bottom: 1px solid #d1d4d4;
      color: #515151;
    }
    .index-nav-scroll {
      width: 100%;
      height: 75rpx;
      line-height: 75rpx;
      padding: 8rpx 0rpx;
    }
    .index-nav-view {
      display: inline-block;
      margin: 0rpx 22rpx;
    }
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，1065人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序隐藏 scroll-view 滚动条

// 隐藏滚动条 ::-webkit-scrollbar { width: 0; height: 0; color: tra

柔情只为你懂/ 2023年01月08日 12:29/ 0 赞/ 192 阅读

相关微信小程序写横向滚动条导航栏

wxml <view class="title-menu"> <view class="title-menu-item active"> 全部

电玩女神/ 2022年12月13日 09:53/ 0 赞/ 237 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 232 阅读

相关微信小程序官方横向滚动tab

先看效果： ![Center][] Page(\{ data: \{ bodyList: \[ \{

Bertha 。/ 2022年06月16日 06:11/ 0 赞/ 291 阅读

相关微信小程序实现横向滚动

最近做项目的时候遇到一个需求实现自定义导航栏的横向滚动,研究了一会,今天记录一下. 看一下实现效果: (下面的导航栏由六个view组成,可滑动) ![70][]

ゝ一纸荒年。/ 2022年05月21日 00:45/ 0 赞/ 341 阅读

相关微信小程序-横向滑动scroll-view隐藏滚动条

文章转载自：[https://blog.csdn.net/qq\_24734285/article/details/53912799][https_blog.csdn.net_

傷城~/ 2022年05月16日 14:41/ 0 赞/ 224 阅读

相关微信小程序 scroll-view 横向不滚动/隐藏滚动条

1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示； 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果

水深无声/ 2022年04月16日 06:26/ 0 赞/ 1066 阅读

相关小程序隐藏滚动条

页面代码 <scroll-view scroll-x class="my_scroll"> <view class='my_scroll_box'

逃离我推掉我的手/ 2022年04月16日 03:49/ 0 赞/ 258 阅读

相关微信小程序 - 页面隐藏滚动条

// 滚动条隐藏 ::-webkit-scrollbar { width: 0; height: 0; color: tr

蔚落/ 2021年07月27日 01:56/ 0 赞/ 510 阅读

相关微信小程序 - scroll-view横向滚动

scroll-view 设置横向滚动 // html scroll-view.scroll(:scroll-x="true") div(v-fo

叁歲伎倆/ 2021年07月26日 19:41/ 0 赞/ 505 阅读