微信小程序顶部用 scroll-view 组件横向滚动，类似tab选项卡的效果，

最新推荐文章于 2025-02-27 01:40:06 发布

qq_36294683

最新推荐文章于 2025-02-27 01:40:06 发布

阅读量6.9k

点赞数

分类专栏：微信小程序文章标签：微信小程序导航滚动

本文链接：https://blog.youkuaiyun.com/qq_36294683/article/details/79374389

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

 
 < 
 view 
   
 class 
 = 
 'nav'> 

 
 < 
 scroll-view 
   
 class 
 = 
 "nva_scorll" 
   
 scroll-x 
   
 scroll-with-animation 
 > 

 
   
 < 
 view 
   
 wx:for 
 = 
 "{{navDate}}" 
   
 class 
 = 
 "{{curMeal===index ? 'selected-meal':'meal-time-item'}}" 
   
 data-index 
 = 
 "{{index}}" 
   
 bindtap 
 = 
 "selectMeal" 
   
 data-id 
 = 
 "{{item._id}}"> 

 
  {{item.name}} 

 
   
 </ 
 view 
 > 

 
 </ 
 scroll-view 
 > 

 
 </ 
 view 
 > 

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_36294683

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序滚动居中导航选项卡

少吃点肉的博客

02-11

4071

微信小程序头部导航经常会用到选项卡，一个会自动居中的选项卡的体验会比普通的选项卡要好很多。效果示意图：被选中的tab会始终居中显示。利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。 wxml代码：  <image wx:if="{{showMaskScroll}}" class=...

微信小程序实现横向滚动导航栏效果

10-15

主要介绍了微信小程序实现横向滚动导航栏效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序实现横向滚动导航栏

最新发布

m0_74398338的博客

02-27

573

微信小程序开发scroll-view的横向滚动不生效的两个解决写法

微信小程序 scroll-view 实现tab导航栏滑动

qq_37172200的博客

03-22

1847

我们在做微信小程序时，应该很大可能会用上这种导航栏！直接看效果图：点击tab 可自由实现滑动，下面来看看我的实现方法！ wxml: <scroll-view class="za" scroll-into-view="{{ztoView}}" scroll-x="true" scroll-with-animation="true"> <view class="zb"...

小程序 横向滚动导航栏

路漫漫其修远兮，吾将上下而求索

10-13

4323

先上案例最终效果：案例实现功能： 1.导航栏横向滚动效果 2.当前项目有下划线标识 3.点击项目，导航栏滚动到相应位置以下将分步骤逐步完善陈述这些功能，最终会呈现所有代码 1.引用组件scroll-view，达到滚动效果万丈高楼平地起，首先要达到横向滚动的效果 wxml <view> <scroll-view scroll-x="true" enable-flex="true" class="scroll"> <b...

微信小程序的滑动组件---可滚动的tab栏

12-05

在微信小程序开发中，创建一个可滚动的tab栏是一项常见的需求，这有助于用户在多个页面或功能之间便捷地切换。本篇文章将详细讲解如何利用微信小程序的自定义组件功能实现一个可滑动的tab栏，并且允许用户自定义背景...

微信小程序顶部可滚动导航效果

08-28

该效果通过使用 scroll-view 组件横向滚动，类似 tab 选项卡的效果，内容使用类似模板方式引用，可以重复利用。实现该效果需要使用以下几个知识点： 1. 使用 scroll-view 组件实现横向滚动效果 scroll-view 组件...

微信小程序实现tab左右切换效果

10-18

如果需要在Tab项间实现平滑滚动效果，可以使用scroll-view组件，并设置其scroll-x属性为true。这样，水平方向上的滚动会使得所有Tab项可以横向滚动，而不会引起页面跳转。 6. 设置数据绑定和事件处理函数：在页面...

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

asteriaV的博客

10-10

863

wxml <view class="title-menu"> <view class="title-menu-item active"> 全部 </view> <view class="title-menu-item">书柜</view> <view class="title-menu-item">桌</view> <view class="title-menu.

微信小程序滚动Tab实现左右可滑动切换

08-29

主要介绍了微信小程序滚动Tab实现左右可滑动切换的相关资料,这里提供实现实例帮助大家实现这样的功能，需要的朋友可以参考下

微信小程序底部导航+顶部table选项卡

02-20

微信小程序底部导航加顶部table选项卡实现。

微信小程序项目实践之主页tab选项实现

01-03

官方文档效果图：实现底部Tab选项，只需要在项目根目录下的app.json下修改如图：先介绍一下app.json文件默认有两个代码块： 1、pages 这里注册了当前小程序的所有页面路径 2、window 这里用于设置小程序的状态栏、导航条、标题、窗口背景色。以上两个详细使用参考文档，本文章不做介绍我们看下app.json提供的另一个配置项：tabBar tabBar提供一些公有的属性对tab配置：　而针对每一个单独的tab 也有一些属性进行配置：官方示意图：具体实现底部Tab功能：设定一个需求，假设当前我们有两个tab,一

微信小程序--实现横向导航滚动标题展示全部

weixin_50659023的博客

11-08

1684

微信小程序--实现横向导航滚动

微信小程序：视图容器scroll-view实现滚动导航栏

清风一阵吹我心

11-17

3406

前言最近在研究小程序，看到了视图容器组件“scroll-view”，它是可滚动视图区域的组件，支持横向滚动和纵向滚动。刚好看到优快云的手机端，看到了顶部的滚动导航栏。不清楚app的滚动导航是怎么实现的，一时兴起，就做了个微信小程序的滚动导航。编码实战因为实现这个滚动导航栏还是很简单的，所以我就直接贴上代码了，再进行部分讲解。首先是页面的代码： <scroll-view scroll...

微信小程序滑动导航栏

m0_57213862的博客

03-14

2280

每个导航栏都设置了一个 data-index 属性，用于标识导航栏的索引。'active':''}}" bindtap="handleNavItemTap" data-index="1">导航2</view>'active':''}}" bindtap="handleNavItemTap" data-index="2">导航3</view>'active':''}}" bindtap="handleNavItemTap" data-index="3">导航4</view>

微信小程序 （横向滚动Tab切换选项卡，使用scroll-view和swiper实现）

weixin_45527865的博客

07-12

1752

思路 1.写基础布局 2.获取屏幕宽度，计算每个tab的宽度（var singleNavWidth = this.data.windowWidth / 5） 3.tab选项居中，每次移动距离（navScrollLeft: (cur - 2) * singleNavWidth）； 4.swiper 高度设置为（100vh） <scroll-view scroll-x enable-flex class="nav" scroll-left="{{navScrollLeft}}" scroll-wi.

微信小程序横向滑动菜单栏实现

weixin_45432648的博客

08-23

2511

微信小程序横向滑动菜单栏实现

微信小程序使用scroll-view组件，实现两个盒子横向滚动

09-29

在微信小程序中，`scroll-view`组件可以用来实现滚动效果。如果你想让两个盒子水平方向上做滚动，首先需要在页面的wxml文件里设置`scroll-x`属性表示水平滚动，并将两个盒子作为`scroll-view`的子节点。这里是基本的示例代码： ```html <view class="parent-scroll">  <scroll-view class="child-scroll1" scroll-x="{{scrollX}}" bindscrolltolower="onScrollToLower1"> <view class="box1">盒一内容</view> <view class="box1">盒一更多内容...</view> </scroll-view>  <scroll-view class="child-scroll2" scroll-x="{{scrollX}}" bindscrolltolower="onScrollToLower2"> <view class="box2">盒二内容</view> <view class="box2">盒二更多内容...</view> </scroll-view> </view> ``` 然后，在js文件中管理这两个滚动视图的滚动状态以及它们之间的关联： ```javascript Page({ data: { scrollX: 0, }, onScrollToLower1(e) { // 当第一个滚动视图到底部时，更新第二个滚动视图的位置 this.setData({ scrollX: e.detail.scrollLeft }); }, onScrollToLower2(e) { // 类似于onScrollToLower1，但用于第二个滚动视图 }, }) ``` 在这个例子中，当一个滚动视图滚到底部时，会通过`bindscrolltolower`事件触发，更新另一个滚动视图的`scroll-left`值，实现联动滚动的效果。