小程序实现多个选项卡切换


Posted in Javascript onJune 19, 2020

选项卡的功能用途有很多地方:例如商品评论的切换,还有文章分类,还有各种各样的切换功能需要用到。这个实现是通过for循环,取数值下标的方式来实现切换

小程序实现多个选项卡切换

test.wxml

<view class='content'>
<view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='key'>{{item.title}}</view>
</view>
<view wx:if='{{idx == 0}}' class='tab1' data-id='0' bindtouchmove="handletouchmove">1111</view>
<view wx:if='{{idx == 1}}' class='tab2' data-id='1' bindtouchmove="handletouchmove">222</view>
<view wx:if='{{idx == 2}}' class='tab3' data-id='2' bindtouchmove="handletouchmove">333</view>

test.wxss

page {
width: 100%;
height: 100%;
}
 
.content {
width: 100%;
display: flex;
justify-content: space-around;
}
 
.tab {
width: 30%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #f0f0f0;
padding: 5rpx;
}
 
.type-item-on {
border-bottom: 4rpx solid #e64340;
color: red;
}
 
.tab1 {
width: 100%;
height: 100%;
background: orange;
}

test.js

//logs.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 tab: [{
  title: '111',
  id: 0
 },
 {
  title: '222',
  id: 1
 },
 {
  title: '333',
  id: 3
 },
 
 ],
 idx: 0, //默认选中第一项
 
 
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 // tab
 tab(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
  idx: index,
 })
 
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
小程序实现tab标签页
Nov 16 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Python计算信息熵实例
2020/06/18 Python
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
优秀求职信范文分享
2013/12/19 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
家具商场的活动方案
2014/08/16 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
java如何实现socket连接方法封装
2021/09/25 Java/Android