微信小程序实现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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
微信小程序实现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
3
2006/10/09 PHP
php 无限分类的树类代码
2009/12/03 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
详谈python http长连接客户端
2017/06/12 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python如何将图片转换素描画
2020/09/08 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
泰国第一在线超市:Tops
2021/02/13 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
车间调度岗位职责
2013/11/30 职场文书
儿童生日会策划方案
2014/05/15 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
学生检讨书范文
2015/01/27 职场文书
博士导师推荐信
2015/03/25 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL