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


Posted in Javascript onFebruary 02, 2018

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

DEMO下载

效果图

YDUI的ScrollTab(滚动选项卡)

WXML

<!--导航 -->
<view class="tui-fixed-left">
 <scroll-view class="tui-city-scroll" scroll-x="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>
<!--列表滚动区 -->
 <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{
 margin-left: 130px;
 position: fixed;
 top: 0;
 left: 0;
}
.tui-fixed-left{
 width: 120px;
 height: 100%;
 border-right: 1px solid #dfdfdf;
 position: fixed;
 background-color: #f5f5f5;
 top: 0;
 left: 0;
}
.tui-list-head{
 background-color: #fff;
 margin-bottom: 15px;
}
.tui-city-scroll{
 width: 100%;
}
.tui-nav-li{
 font-size: 30rpx;
 padding: 0 10px;
 height: 100rpx;
 line-height: 100rpx;
 width: 100px;
 display: block;
 border-bottom: 1px solid #dfdfdf;
 position: relative;
 z-index: 10;
}
.tui-nav-active{
 background-color: #fff;
}

.tui-fixed-y{
 margin-left: 120px;
 padding-left: 10px;
 padding-right: 10px;
 height: 100%;
 position: fixed;
 bottom: 0;
 right: 0;
}
.tui-city-scroll-y{
 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 })
 }
})

总结

实现原理和处理方式都和微信小程序—-实现YDUI的ScrollNav组件一样,细微的差别在于WXSS样式表做了改变!

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

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
JS中的模糊查询功能
Dec 08 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
微信小程序实现YDUI的ScrollNav组件
Feb 02 #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
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
CSS常用网站布局实例
2008/04/03 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
vue中的数据绑定原理的实现
2018/07/02 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python写xml文件的操作实例
2014/10/05 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Python: 传递列表副本方式
2019/12/19 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
教师节横幅标语
2014/10/08 职场文书
五年级小学生评语
2014/12/26 职场文书
英文慰问信范文
2015/03/24 职场文书
讲座新闻稿
2015/07/18 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python