10行代码实现微信小程序滑动tab切换


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下

效果预览:

 10行代码实现微信小程序滑动tab切换

js部分:

Page({

 data: {
  arr: [1,2,3,4,5,6,7,8],
  index: 1
 },

 onLoad: function (options) {
  this.setData({
   childW: this.data.arr.length * 80
  });
 },

 tabOn: function (e) {
  this.setData({
   index: e.currentTarget.dataset.index + 1
  });
 }

})

wxtml部分:

<scroll-view scroll-x scroll-with-animation='true'>
 <view style='width: {{ childW }}px'>
  <block wx:for='{{ arr }}'>
   <view class='tab' catchtap='tabOn' data-index='{{ index }}'>{{ item }}</view>
  </block>
 </view>
</scroll-view>

<view class='content' wx:if='{{ index == 1 }}'>内容一</view>
<view class='content' wx:if='{{ index == 2 }}'>内容二</view>
<view class='content' wx:if='{{ index == 3 }}'>内容三</view>
<view class='content' wx:if='{{ index == 4 }}'>内容四</view>
<view class='content' wx:if='{{ index == 5 }}'>内容五</view>
<view class='content' wx:if='{{ index == 6 }}'>内容六</view>
<view class='content' wx:if='{{ index == 7 }}'>内容七</view>
<view class='content' wx:if='{{ index == 8 }}'>内容八</view>

wxss部分:

.tab{
 height: 50px;
 width: 80px;
 display: inline-block;
 text-align: center;
 line-height: 50px;
}

.tab:nth-child(odd){
 background-color: #ccc;
}

.content{
 width: 100%;
 height: 200px;
 text-align: center;
 line-height: 200px;
}

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

Javascript 相关文章推荐
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
js 金额文本框实现代码
Feb 14 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
微信小程序实现复选框效果
Dec 28 #Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 #Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
微信小程序实现日历效果
Dec 28 #Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
You might like
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
编程输出如下图形
2013/11/24 面试题
项目经理岗位职责
2013/11/11 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android