微信小程序----实现YDUI的ScrollNav组件（滚动导航）

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

下载

DEMO下载

更多微信小程序实例

效果图

实现原理

采用双 scroll-view 组件实现双滚动！

WXML

<!--导航滚动  -->
<scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true"><text bindtap="getStatus" id="NAV{{index}}" class="tui-nav-li {{index === status ? 'tui-nav-active' : ''}}" data-index="{{index}}" wx:for="{{navList}}">{{item}}</text>
</scroll-view>
<!--列表滚动区  -->
<view class="tui-fixed-y"><scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true"><view wx:for="{{navList}}"><view id="NAV{{index}}" class="tui-list-head">{{item}}</view><view class="tui-list-li">{{item}} 列表 {{index}}</view></view></scroll-view>
</view>

WXSS

.tui-fixed-x{width: 100%;position: fixed;top: 0;left: 0;
}
.tui-city-scroll{height: 80rpx;line-height: 80rpx;width: 100%;white-space: nowrap;
}
.tui-nav-li{font-size: 30rpx;padding: 0 8rpx;
}
.tui-nav-li:first-child{padding-left: 16rpx;}
.tui-nav-li:last-child{padding-right: 16rpx;}
.tui-nav-active{color: red;}.tui-fixed-y{width: 100%;height: calc(100% - 80rpx);position: fixed;bottom: 0;left: 0;
}
.tui-city-scroll-y{padding: 0 20rpx;height: 100%;box-sizing: border-box;
}
.tui-list-head{height: 50px;line-height: 50px;text-align: center;font-size: 30rpx;color: blue;
}
.tui-list-li{height: 400px;padding: 10rpx;color: #fff;font-size: 50rpx;background-color: lightgreen;
}

JS

Page({data: {navList: ['今日特惠', '烟灶推荐', '净水饮水推荐', '洗碗机推荐', '电热推荐', '燃热推荐', '消毒柜推荐', '嵌入式推荐', '商用电器','活动说明'],status: 0},getStatus(e){this.setData({ status: e.currentTarget.dataset.index})}
})

注意

scroll-view 组件如果横向滚动必须要有一个可视宽度，纵向滚动必须要有一个可视高度；
滚动的定位采用 scroll-view 组件的 scroll-into-view 属性，用 id 进行定位。

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----实现YDUI的ScrollNav组件（滚动导航）相关推荐

微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
微信小程序中WebView中原生组件限制问题解析
背景在微信的文档中有一个章节说明了『原生组件的使用限制』有这么一段话『由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:原生组件的层级是最高的,所以页面中的其他组件无论设 ...
Mpvue微信小程序时间消耗进度条组件的实现
实现效果: 组件源码: 组件主要涉及时间的计算.闰年的判断,比较简单,因此注释比较少. <progress></progress>组件为微信小程序官方的进度条. <tem ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序 live-player 实时音视频播放组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 实时音视频播放(v2.9.1 起支持同层渲染).相关api:wx.createLivePlayerContext 暂只针对国内主体如下类目的 ...
微信小程序（三）常见组件
常见组件 view 相当于web里的div标签 text 1.文本标签 2.只能嵌套text 3.长按文字可以复制(只有该标签有这个功能) 4.可以对空格(&nbsp)回车 ...

微信小程序----实现YDUI的ScrollNav组件（滚动导航）

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

下载

更多

效果图

实现原理

WXML

WXSS

JS

注意

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

微信小程序----实现YDUI的ScrollNav组件（滚动导航）相关推荐

最新文章

热门文章