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


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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
基于python 凸包问题的解决
2020/04/16 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
学校综治宣传月活动总结
2014/07/02 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
夏季药店促销方案
2014/08/22 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
语文教师求职信范文
2015/03/20 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
刮痧观后感
2015/06/05 职场文书
外出学习心得体会范文
2016/01/18 职场文书
2019经典广告词集锦!
2019/07/02 职场文书