热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

微信小程序YDUI的ScrollTab组件滚动选项卡效果详解

这篇文章主要为大家详细介绍了微信小程序实现YDUI的ScrollTab组件,滚动选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要和大家详细介绍微信小程序实现YDUI的ScrollTab组件,滚动选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

DEMO下载

效果图

YDUI的ScrollTab(滚动选项卡)

WXML



 
  {{item}}
 


 
 
  
   {{item}}
   {{item}} 列表 {{index}}
  
 

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样式表做了改变!


推荐阅读
  • 开发笔记:小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
    开发笔记:小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 本文详细介绍了如何使用 PHP 接收并处理微信支付的回调结果,确保支付通知能够被正确接收和响应。 ... [详细]
  • 微信小程序:授权登录与手机号绑定
    本文详细介绍了微信小程序中用户授权登录及绑定手机号的流程,结合官方指引和实际开发经验,提供了一套完整的实现方案,帮助开发者更好地理解和应用。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文探讨了在C语言编程中,如何有效避免多文件项目中的重定义问题,通过合理使用预处理器指令和extern关键字,确保代码的健壮性和可维护性。 ... [详细]
  • 区块链的兴起:恰逢其时,犹如1996年的互联网
    本文探讨了区块链技术的发展阶段,将其与1996年互联网的兴起进行对比,分析了当前区块链技术的现状及其未来潜力。 ... [详细]
  • 掌握Spring MVC中自定义类型转换与格式化的技巧
    近期,在开发一款小程序的过程中遇到了几个Spring MVC接口需要传递时间参数的问题。本文将详细介绍如何利用Java 8 Time API在Spring MVC中实现时间参数的自定义类型转换和格式化。 ... [详细]
  • 探讨在微信小程序环境中是否能够获取到全局this对象,并分析其背后的技术实现。 ... [详细]
  • 智慧城市建设现状及未来趋势
    随着新基建政策的推进及‘十四五’规划的实施,我国正步入以5G、人工智能等先进技术引领的智慧经济新时代。规划强调加速数字化转型,促进数字政府建设,新基建政策亦倡导城市基础设施的全面数字化。本文探讨了智慧城市的发展背景、全球及国内进展、市场规模、架构设计,以及百度、阿里、腾讯、华为等领军企业在该领域的布局策略。 ... [详细]
  • 微信小程序koa获取微信accesstoken ... [详细]
  • 鸿蒙系统实战:打造高效聊天辅助应用
    通过鸿蒙系统开发一款高效的聊天辅助应用,本教程将详细展示从零开始构建这一实用工具的全过程,旨在为开发者提供全面的技术指导。 ... [详细]
  • 微信小程序实现拍照与图片上传功能
    本文介绍如何在微信小程序中实现用户通过拍照或从相册选择图片,并将图片上传至服务器的功能,包括调用相关API和处理上传响应。 ... [详细]
author-avatar
kingseao
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有