详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

一、实践踩坑

项目使用mpvue开发

1. scroll-view默认是不滚动的。。所以要先设置scroll-x="true"或者scroll-y="true"

2. 在scroll-view里面添加定宽元素，超过scroll-view宽度（设置了100%，即屏幕宽度)后，它竟然换行了。所以要scroll-view的样式要这样设置：

 scroll-view {
   width: 100%;
   white-space: nowrap; // 不让它换行
  }

3. 然后在定宽元素里边添加子容器：

// html大概长这样
<scroll-view scroll-x="true">
 <div class="tab-item">
  <img class="content-icon"/>
  <div></div>
 </div>
 <div class="tab-item">
  <img class="content-icon"/>
  <div></div>
 </div>
 <div class="tab-item">
  <img class="content-icon"/>
  <div></div>
 </div>
</scroll-view>

// css相应就大概长这样
scroll-view {
  display: flex;
  flex-wrap: nowrap;
}
.tab-item {
  display: flex;
  justify-content: center;
  width: 25%;
  ...
}

然后发现.tab-item并没有排在一行上。。说明scroll-view和.tab-item都设置display: flex无效？无奈之下，只好在它外边再包一层，然后样式设置display: inline-block。此时正确姿势如下：

// html
<div class="scroll-view-container">
 <scroll-view scroll-x="true" :scroll-into-view="toView">
  <div class="tab-container">
   <div class="tab-item">
    <img class="content-icon"/>
    <div></div>
   </div>
  </div>
 </scroll-view>
</div>

// css变成这样子
scroll-view {
 width: 100%;
 white-space: nowrap; // 不让它换行
}

.tab-container {
 display: inline-block;
 width: 25%;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  ...
}

到这里，scroll-view就基本如我所愿了，大概长这样：

二、隐藏滚动条

在网上搜了很多，都是说加上这段代码就可以：

/*隐藏滚动条*/

::-webkit-scrollbar{

  width: 0;

  height: 0;

  color: transparent;

}

或者有的人说这样子：

/*隐藏滚动条*/

::-webkit-scrollbar{

  display: none;

}

然而两种方法我都试过，scroll-view的滚动条依然存在。。测试机型是安卓机子。

但是用display: none这种方法是可以隐藏掉页面的滚动条的，就是scroll-view的滚动条没隐藏掉。

后来，在小程序社区看到官方人员这样子解答：

是的，就是这种野路子。当然 ，它下面的评论里也有人提供了另一种解决思路方法，但我还是选择了官方说的那种野路子方法。传送门

实现思路就是，在scroll-view外边再包一个容器，它的高度小于scroll-view的高度，这样就会截掉滚动条，达到隐藏了滚动条的效果。

// scss
.scroll-view-container { // 包裹scroll-view的容器
  height: $fakeScrollHeight;
  overflow: hidden; // 这个设置了就能截掉滚动条啦
  scroll-view {
   width: 100%;
   white-space: nowrap;
  }
 }

 .tab-container { // 我这里是用.tab-container来撑开scroll-view的高度，所以高度在它上面设置,加上padding，那么它就会比外层容器（.scroll-view-container）要高
  display: inline-block;
  width: 26%;
  height: $fakeScrollHeight;
  padding-bottom: $scrollBarHeight;
 }

大概意思是这样：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

  • 详解微信小程序之scroll-view的flex布局问题

    关于微信小程序的scroll-view组件,第一次写的时候是直接在scroll-view中用了一层容器包裹子元素,然后用了flex布局,并且是用了组件来实现的横向滚动,后面有提出改进,但是不记录下,就发现过了几天,就有点懵了 1.效果图 2.在scroll-view里加一层容器,使用flex布局实现 这里用flex布局实现的话,就要用组件的形式 wxss文件 .scrollView{ padding: 0 20rpx; white-space: nowrap; box-sizing: borde

  • 小程序scroll-view组件实现滚动的示例代码

    前言:这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动. GitHub: https://github.com/Ewall1106/miniProgramDemo 1.竖向滚动 首先从简单的来,竖向滚动很简单,只用记住两点即可: 首先得设置 scroll-y 属性: 其次,一定要给 scroll-view 设置一个 height 高度: <scroll-view scroll-y style="height: 200px;"> <view cl

  • 微信小程序scroll-view组件实现滚动动画

    本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位: 利用scroll-view的scroll-with-animation属性实现滚动动画过度. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIn

  • 微信小程序scroll-view仿拼多多横向滑动滚动条

    本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下 效果图 实现代码 index.wxml <scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}&

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

    wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><

  • 微信小程序 scroll-view组件实现列表页实例代码

    scroll-view组件介绍 scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面 首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置底部导航在"tabBar"的列表项("lis

  • 微信小程序scroll-view实现字幕滚动

    本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码,供大家参考,具体内容如下 需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: demo:字幕滚动 通过控制滑动条来完成字幕滚动,通过setinterval完成字幕循环滚动. wxml: <scroll-view class="container" scroll-y="true" bindscroll="scroll" scroll-top="{{s

  • 微信小程序 scroll-view实现锚点滑动的示例

    微信小程序 scroll-view实现锚点滑动的示例

    前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏

  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    一.实践踩坑 项目使用mpvue开发 1. scroll-view默认是不滚动的..所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了.所以要scroll-view的样式要这样设置: scroll-view { width: 100%; white-space: nowrap; // 不让它换行 } 3. 然后在定宽

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下: <!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi

  • 详解微信小程序 template添加绑定事件

    详解微信小程序 template添加绑定事件 对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

  • 详解微信小程序审核不通过的解决方法

    详解微信小程序审核不通过的解决方法

    前言 近来,微信小程序一直活跃在开发者的眼球中.很多开发者都投身微信小程序的开发中,而这些开发者,总是需要面对最后一道难题:如何以一种优雅的姿势来通过微信官方的审核.本文基于几天前提交审核的一次总结,写得有不当的地方,请各位大佬指正. 问题描述 先上一下微信小程序平台常见拒绝情形的说明文件.由于我提交的小程序中包含了"分享群"的按钮,所以审核未通过,未通过的原因如下: 3.2.1 小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享.诱导添加.诱导关注公众号.诱导下载等,要求用户分

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • 详解微信小程序（Taro）手动埋点和自动埋点的实现

    每一个公司要想用户增长,都要收集和分析用户操作数据,因此埋点是必不可少的事情. 而对于前端职业发展来说,传统的手动埋点,无疑是繁琐又无聊的事情,能简化就简化. 一.手动埋点 手动埋点就是在每一处需要的地方,都加一段上报埋点的代码.影响代码的阅读体验,且散落的埋点代码不方便管理. 以页面 pv 为例,我们此前是在每一个页面中上报 pv: // src/manual/home/index.tsx import tracking from "./tracking"; // pageSn 是前

  • 详解微信小程序「渲染层网络层错误」的解决方法

    详解微信小程序「渲染层网络层错误」的解决方法

    问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里.但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好:如果要做上线,这种方法的可行度不高: 使用外部链接.成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中

  • 详解微信小程序 同步异步解决办法

    详解微信小程序 同步异步解决办法 小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参.那是因为微信小程序函数是异步执行的.但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性. WxService.js import Tools from 'Tools' import es6 from '../assets/plugins/es6-promise' class Servic

随机推荐