微信小程序实现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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
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作为网站开发语言的原因分享
2012/01/03 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
详解Python中的日志模块logging
2015/06/19 Python
浅析Python数据处理
2018/05/02 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
公司新年寄语
2014/04/04 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
党员读书活动心得体会
2016/01/14 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
python非标准时间的转换
2021/07/25 Python
python井字棋游戏实现人机对战
2022/04/28 Python