微信小程序使用scroll-view制作横向滑动滚动条

最新推荐文章于 2025-09-20 14:11:57 发布
原创 最新推荐文章于 2025-09-20 14:11:57 发布 · 1.4k 阅读 · 6
标签
#微信小程序 #小程序

示例图

废话不多说，直接上代码

        <view style="display: flex;position: relative;">
          <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscroll="getleft">
            <view class="bottom">
              <view class="map_btn_bg">
                <view class="map_btn_font">1</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">2</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">3</view>
              </view>
              <view class="map_btn_bg">
                <view class="map_btn_font">4</view>
              </view>
              <view class="map_btn_bg"
最低0.47元/天 解锁文章
【技术】uniapp 之 scroll-view demo
涛涛之海
07-08 1359
scroll-view 可滚动视图区域。可以做成小卡片的形式，用于左右滑动。 属性说明 属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number/String 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number/String 50 距底部/右边多远时（单位
微信小程序 横向滑动和堆叠式轮播
qq_36158551的博客
05-26 2326
初始需要给item们放置好位置以及各种层级，然后在切换滑动的过程中对设置的位置、层级、透明度进行替换，加上小程序的wx.createAnimation()动画效果。scroll-view在ios上没有显示滚动条，如果在安卓设备上会显示一个滚动条。注：因为在手机上看的话会有横向滚动条，下面这个css代码能去掉横向滚动条。
微信小程序横向滚动条自定义组件
IT从业者
03-18 1006
微信小程序横向滚动条自定义组件
微信小程序：scroll-view制作横向滚动导航条特效
qq_40522087的博客
01-21 1万+
微信小程序：scroll-view制作横向滚动导航条特效 一、scroll-view介绍 微信小程序官方释义为：可滚动视图区域，目前一共有10几个属性，包括：scroll-x、scroll-y、scroll-top等。详细介绍见官方文档： developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。下面来说下如何使用scroll-view做一个可横向滚动的导航条吧。效果如图： 二、scroll-x实现横向滚动 先来看下wxml页面
scroll-view的横向滚动
热门推荐
maxwheel的博客
01-02 3万+
本来以为实现一个横向滚动的view很简单，但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。 scroll-view的内层view元素需要： display: inline-block scroll-view的外层元素需要： white-space: nowrap 使得内部组件不换行。 再加上一些左右空行的渐变修饰，使得一个简单的横向滚动元素...
微信小程序自制scroll-view横向滑动滚动条(仿拼多多)
hanxue_tyc的博客
11-30 2万+
效果图 实现代码 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-left='0' bindscroll="get
微信小程序开发，scroll-view实现商品列表水平/横向滑动
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-23 5748
使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。在上面.wxml布局中，商品列表是通过view堆积起来的，在实际开发中，肯定也不能这样写死，列表数据应该是一个动态的。在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。官方说只有在竖向滚动时，需要给scroll-view一个固定高度，但在实际开发过程中，解决方案：在scroll-view标签中添加。
微信小程序：scroll-view横向滚动的使用和隐藏滚动条
彭世瑜的博客
11-29 5054
文档： https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 横向滚动 <scroll-view class="scroll__wrap" scroll-x="true"> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <view class="scroll__item">{{item}}</view
微信小程序scroll-view横向滚动
Aan___的博客
12-05 1136
当我们使用scroll-view横向滚动时，添加 scroll-x 页面内容仍然没有横向展示。
微信小程序--开发横向滚动条scroll-view
weixin_44431073的博客
12-01 3418
开发横向滚动条scroll-view
微信小程序开发系列（十二）·屏幕滚动scroll-view 组件的使用
时光の尘的博客
03-02 2万+
网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。① scroll-x： 允许横向滚动。② scroll-y： 允许纵向滚动。框住部分能够上下滚动。
微信小程序开发 scroll-view实现横向纵向滚动
m0_65027074的博客
10-20 4289
微信小程序开发 scroll-view实现横向纵向滚动
微信小程序使用scroll-view组件实现横向滚动
lifeiyang313的博客
07-16 1279
想记录的原因是网上的教程都是说scroll-view的样式中的width设置为100%，但是实测中发现无法横向滚动，设置成固定值才能够滚动。
【微信小程序】scroll-view滚动
qq_63806300的博客
11-11 4289
1、在scroll-view标签上加上样式属性：display:flex;white-space:nowrap； 2、scroll-view标签下的一级栏目标签需要加上样式属性：display: inline-block; 只有结合上面两步，才能实现横向滚动。
微信小程序开发的scroll-view视图组件的横向滚动设置不生效解决方法
m0_74398338的博客
02-27 1205
微信小程序开发scroll-view的横向滚动不生效的两个解决写法
微信小程序设置滚动条样式(笔记)
ZerZhang的博客
04-19 1672
微信小程序设置滚动条样式(笔记)
scroll-view横向滚动
c_xiyi的博客
10-13 850
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view class="box"> 1 </view> <view class="box"> 2 </view> <view class="box"> 3 </view> <view class="box">
微信小程序scroll-view横向滚动和纵向滚动实现（亲测管用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
12-27 1万+
微信小程序横向滚动 //wxml <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" scroll-into-view="{{rightId}}" > <view style="display: inline-block">1</view> <view style="display: inline-block">2</
2.2，零基础入门uni-app：scroll-view组件的横向与纵向滚动实战（咸虾米2.2）
2201_75436433的博客
06-29 989
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。scroll-x：启用横向滚动scroll-y：启用纵向滚动scroll-top：设置竖向滚动位置：设置横向滚动位置横向滚动必须配合使用纵向滚动需要设置固定容器高度通过CSS可以优化滚动体验和视觉效果注意不同布局模式下子元素的显示方式。
uni-app 用scroll-view实现横向滚动
最新发布
qq_36158551的博客
09-20 1072
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。核心属性：（1）scroll-x：启用横向滚动（2）scroll-y：启用纵向滚动（3）scroll-top：设置竖向滚动位置（4）scroll-left：设置横向滚动位置scroll-view，必须设置：white-space: nowrap;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值