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 相关文章推荐
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
基于vue-element组件实现音乐播放器功能
May 06 Javascript
小程序实现分类页
Jul 12 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 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
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php计算整个目录大小的方法
2015/06/19 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
python基础知识小结之集合
2015/11/25 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python实现的knn算法示例
2018/06/14 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
python 弧度与角度互转实例
2020/04/15 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
高中教师评语大全
2014/04/25 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Python实现批量自动整理文件
2022/03/16 Python
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
Python使用永中文档转换服务
2022/05/06 Python