微信小程序实现YDUI的ScrollNav组件


Posted in Javascript onFebruary 02, 2018

本文实例为大家分享了微信小程序实现滚动导航效果的具体代码,供大家参考,具体内容如下

DEMO下载

效果图

微信小程序实现YDUI的ScrollNav组件

实现原理

采用双 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 进行定位。

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vuex的简单使用教程
Feb 02 #Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 #Javascript
使用express+multer实现node中的图片上传功能
Feb 02 #Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 #Javascript
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
使用webpack打包koa2 框架app
Feb 02 #Javascript
You might like
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php生成excel文件的简单方法
2014/02/08 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Angular的$http与$location
2016/12/26 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python判断Abundant Number的方法
2015/06/15 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python爬取网易云音乐评论
2018/11/16 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Unix/Linux开发面试题
2016/08/16 面试题
迟到检讨书900字
2014/01/14 职场文书
高二化学教学反思
2014/01/30 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
大二学习计划书范文
2014/04/27 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
国庆节新闻稿
2015/07/17 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js